/* ============================================================
   THE BUYER APP  —  built to references/SHARK-DESIGN-SYSTEM.md

   Same house style as the rep marketing-links hub, for the same reason: a rep
   opens both on a phone, one-handed, usually from a message in another app.
   Two surfaces that feel different read as two products.

   WHAT CHANGED FROM THE FIRST VERSION, and why:
     * It was DARK. The house pages are paper. A dark admin panel bolted onto a
       light product is the tell that one of them was an afterthought.
     * It was TABLES. Seven columns of lead data is a spreadsheet, and a
       spreadsheet on a 390px phone is the clutter. §1: "cards, not sections.
       The page is a list, not a landing page."
     * It used the system font stack. The three faces below are the voice.

   The nine palette tokens are the only thing that would change for another
   brand. Neutrals are biased toward the accent on purpose (§2): a generic grey
   beside a violet accent is the tell that the palette was not chosen.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..800&family=Instrument+Sans:ital,wght@0,400..700;1,400&family=JetBrains+Mono:wght@400;500&display=swap");

:root{
  /* the nine, SHARK house purple */
  --sk-brand:#7729EE;
  --sk-brand-deep:#571EAE;
  --sk-brand-tint:#F1EAFD;
  --sk-ink:#141021;
  --sk-ink-soft:#5B5570;
  --sk-ink-faint:#6E6884;   /* 4.9:1 on paper, 4.5:1 on line-soft (was #8E88A3, 3.1:1) */
  --sk-paper:#F7F5FB;
  --sk-line:#E5E0EF;
  --sk-line-soft:#EFEBF7;
  --sk-card:#ffffff;
  /* Brand-coloured text on a card or the page. The same as brand-deep in light; dark mode
     (app-theme.mjs darkStyle) lightens it so it still reads on a dark card. White pills inside a
     brand-filled box keep brand-deep, which stays dark in both. */
  --sk-link:var(--sk-brand-deep);
  /* The second colour: "new, or for you" (2026-10-11). app-theme.mjs accentStyle() prints each system's; these are the
     house defaults. Chevrons and arrows are a quiet grey worked from the ink. */
  --sk-accent:#E8692F;
  --sk-accent-rgb:232,105,47;
  --sk-accent-tint:#FCEDE6;
  --sk-accent-deep:#AE4F23;
  --sk-chev:color-mix(in srgb,var(--sk-ink-faint) 65%,var(--sk-card));
  /* The third colour: AI (2026-10-16, Jeff: "make it the orange color ... the apps tertiary color"). Orange means made by
     AI, and only that: the doors into Ask for ideas and its screen (lib/ai-look.mjs). Ink on it is --sk-ai-night, never
     white (white on this orange is 2.6:1). */
  --sk-ai:#FF7A1A;
  --sk-ai-deep:#C2410C;
  --sk-ai-glow:#FFB27A;
  --sk-ai-night:#170B05;

  --sk-brand-rgb:119,41,238;
  --sk-brand-deep-rgb:87,30,174;
  --sk-paper-rgb:247,245,251;
  --sk-line-rgb:229,224,239;
  --sk-shadow-rgb:20,16,33;

  /* status stays semantic. Purple means "ours"; green, amber and red keep
     meaning delivered, pending and failed, or the one screen a buyer reads for
     bad news becomes unreadable. */
  --sk-ok:#1E7A46;
  --sk-warn:#9A6206;
  --sk-bad:#B3261E;
  --sk-ok-bg:#E8F6ED;
  --sk-warn-bg:#FDF3E2;
  --sk-bad-bg:#FCEBEA;

  --sk-r:18px;
  --sk-r-sm:12px;
  --sk-pad:20px;
  --sk-shadow:0 1px 2px rgba(var(--sk-shadow-rgb),.04), 0 8px 24px -12px rgba(var(--sk-shadow-rgb),.18);
  --sk-shadow-lift:0 2px 4px rgba(var(--sk-shadow-rgb),.05), 0 18px 40px -18px rgba(var(--sk-shadow-rgb),.28);
  --sk-grad:linear-gradient(122deg, var(--sk-brand) 0%, var(--sk-brand-deep) 88%);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  /* Full bleed ground, capped content, as a GRID COLUMN and never margin:auto
     (§1) -- components that set the `margin` shorthand would reset it and the
     page would drift left while the header stayed centred. */
  display:grid;
  grid-template-columns:1fr min(620px,100%) 1fr;
  min-height:100vh;
  /* ⚠️ align-content, not a typo for align-items. The three children (header, account
     bar, main) are three AUTO rows, and min-height:100vh leaves spare space on a short
     page which grid distributes BETWEEN them by default -- pushing the heading half a
     screen down from the nav. Only visible when content is short, which is why it
     survived until an empty inbox rendered it. */
  align-content:start;
  padding:0 16px calc(56px + env(safe-area-inset-bottom));
  background:var(--sk-paper);
  color:var(--sk-ink);
  font-family:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-size:17.5px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
}
body > *{grid-column:2}

/* paper grain, so the flat off-white does not read as an unstyled default */
body::before{
  content:"";
  position:fixed;inset:0;
  grid-column:1/-1;
  pointer-events:none;z-index:-1;
  opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");
}
/* Under the page, not over it: the grain sits at z-index -1 (the page has no html background, so body's paints on the
   canvas behind it). Body's children used to get z-index:1 each to rise over it, and that also landed on whatever a
   browser extension puts on the page: Loom's recording controls (z-index 2147483647 inside their own box) were held at
   layer 1, under the desktop menu's 30 (Jeff, 2026-10-24: "I can't even see loom controls when shooting a loom"). So no
   z-index here: an extension's layers count again. position stays, for anything placed inside a child. */
body > *{position:relative}

@keyframes sk-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* The rise plays on the first screen of a visit only (app/shared.mjs NAV_HEAD sets data-nav when this
   screen was reached from another one of the app): replayed on every tap it read as a flash. */
html[data-nav]{--sk-rise:sk-still}   /* a name with no keyframes: "none" here would be read as the fill mode */

/* ONE SCREEN HANDS OVER TO THE NEXT (2026-10-07): the old screen stays up until the new one is ready,
   then the middle fades across while the header and tabs hold still. iOS 18.2+ and Chrome; elsewhere
   ignored, and screens change as before. */
@view-transition{navigation:auto}   /* the names are on .appbar and .tabs (view-transition-name) */
::view-transition-old(root),::view-transition-new(root){animation-duration:.14s}
::view-transition-group(sk-appbar),::view-transition-group(sk-tabs){animation:none}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ---------------------------------------------------------------- shell
 *
 * An appbar and five bottom tabs. The old strip scrolled eight links sideways, which on a
 * phone means the ones past the edge are never found -- depth is free when every screen is
 * obvious, breadth is not.
 *
 * ⚠️ THE TAB BAR IS FIXED, so `main` must reserve room for it or the last row of every
 * list sits under it, unreachable and invisible. env(safe-area-inset-bottom) is what keeps
 * it above the home indicator on a notched phone rather than behind it.
 */
.appbar{
  position:sticky;top:0;z-index:20;view-transition-name:sk-appbar;
  display:flex;align-items:center;gap:10px;
  padding:10px 0 10px;
  background:color-mix(in srgb, var(--sk-paper) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--sk-line-soft);
}
.brand{display:block;text-decoration:none;margin-right:auto;animation:var(--sk-rise,sk-rise) .6s cubic-bezier(.2,.7,.3,1) both}
.brand img{display:block;width:104px;height:auto}
.brand img.syslogo{width:176px;max-width:48vw}
/* The tagline is a client directive, not decoration: "AI MARKETING SYSTEM" is the
   house tagline on every system, so the app wears it where the pages do. */
.brand .tag{
  display:block;margin-top:2px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:9.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sk-ink-faint);
}

.iconbtn{
  position:relative;flex:none;
  width:44px;height:44px;border-radius:11px;
  display:grid;place-items:center;
  background:var(--sk-card);border:1px solid var(--sk-line);
  color:var(--sk-ink-soft);text-decoration:none;
}
.iconbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.iconbtn i{
  position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:9px;
  background:var(--sk-accent);border:2px solid var(--sk-card);
}
.avatar{
  flex:none;width:44px;height:44px;border-radius:999px;
  display:grid;place-items:center;text-decoration:none;
  background:var(--sk-grad);color:#fff;
  font-family:"Archivo",sans-serif;font-variation-settings:"wght" 700;font-size:14.5px;
  letter-spacing:.02em;
}

/* Room under the last thing on the page (the "Need help?" line) for the tab bar it scrolls behind,
   plus a gap, on every system (Jeff, 2026-10-01: "chat with support ... not enough padding"). */
main{padding-bottom:calc(36px + env(safe-area-inset-bottom))}

.tabs{
  view-transition-name:sk-tabs;
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));   /* minmax: a long translated word can't widen a column */
  gap:2px;padding:7px 6px calc(7px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--sk-card) 94%, transparent);
  backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-top:1px solid var(--sk-line);
}
.tabs a{
  position:relative;
  display:grid;justify-items:center;align-content:center;gap:3px;
  padding:6px 2px;border-radius:11px;
  color:var(--sk-ink-faint);text-decoration:none;
  font-family:"Archivo",sans-serif;font-variation-settings:"wght" 600;font-size:12px;
  min-width:0;max-width:100%;text-align:center;
}
.tabs a svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
/* The screen you're on, plain at a glance (Jeff, 2026-10-11: "make it so that the bottom menu bar indicates what screen
   youre on? change color of icon and text and give the background/ button a light sharde"): the system's brand colour
   on the icon, its dark shade bold on the word, and a light wash of the brand behind both. */
.tabs a[aria-current],.tabs a[aria-selected]{color:var(--sk-link);background:rgba(var(--sk-brand-rgb),.15);font-variation-settings:"wght" 760}
.tabs a[aria-current] svg,.tabs a[aria-selected] svg{stroke:var(--sk-brand);stroke-width:2.3}
/* THE APP POLISH BATCH (Jeff, 2026-10-11: "any other ui touches like that ... make the app feel more refined?"). */
/* Account's own screens light the avatar, since no tab is theirs (shared.mjs: nav "/settings"). */
.avatar[aria-current]{box-shadow:0 0 0 2px var(--sk-card,#fff),0 0 0 4px var(--sk-brand)}
/* Notifications is the bell's: it lights the way the current tab does. */
.iconbtn.bell[aria-current]{color:var(--sk-link);background:rgba(var(--sk-brand-rgb),.15);border-color:rgba(var(--sk-brand-rgb),.45)}
/* A tap answers at once: what you press sinks a little until the next screen arrives (not for reduced motion). */
@media (prefers-reduced-motion:no-preference){
  .tabs a,.btn,button,a.card,a.row,.hm-box,.hubcard,.lb-card,.rowlink{transition:transform .12s ease,background-color .15s ease}
  .tabs a:active,.btn:active,button:active,a.card:active,a.row:active,.hm-box:active,.hubcard:active,.lb-card:active,.rowlink:active{transform:scale(.97)}
}
/* "Saved." and the like fade away after a few seconds (app.js). */
.notice.sk-fade{transition:opacity .45s ease,max-height .45s ease .3s,margin .45s ease .3s,padding .45s ease .3s;overflow:hidden}
.notice.sk-gone{opacity:0;max-height:0!important;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;border-width:0}
/* Pull down to refresh, in the store app (app-nav.js): a ring that turns as you pull and spins while it loads. */
.sk-pull{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 64px);z-index:70;width:28px;height:28px;margin-top:-28px;
  border-radius:50%;border:3px solid rgba(var(--sk-brand-rgb),.25);border-top-color:var(--sk-brand);background:var(--sk-card,#fff);
  box-shadow:0 2px 10px rgba(0,0,0,.12);opacity:0;transform:translate(-50%,0);pointer-events:none;transition:opacity .2s ease}
.sk-pull.ready{border-color:var(--sk-brand);border-top-color:var(--sk-brand)}
.sk-pull.spin{opacity:1!important;animation:sk-pull-spin .7s linear infinite}
@keyframes sk-pull-spin{from{transform:translate(-50%,40px) rotate(0)}to{transform:translate(-50%,40px) rotate(360deg)}}
/* Unread on a tab is a dot, not a count: the number belongs on the screen that can act on
   it, and a badge on five tabs turns into decoration. */
/* The desktop menu's dropdowns (shared.mjs SUBS); the phone keeps five plain tabs. */
.tabs .tabgrp{display:none}
.tabs .dot{
  position:absolute;top:4px;right:calc(50% - 16px);
  width:7px;height:7px;border-radius:9px;background:var(--sk-accent);
}

/* ⚠️ IN FLOW, NOT FIXED. Fixed, it floated over whatever the page ended with --
   on an empty Leads screen it sat straight across the "no leads yet" line. */
.adminlink{margin:26px 0 0;text-align:center}
.adminlink a{
  pointer-events:auto;
  display:inline-block;padding:5px 12px;border-radius:999px;
  background:var(--sk-ink);color:var(--sk-paper);
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;opacity:.78;
}


/* ----------------------------------------------------------------- type */

/* ⚠️ TOP AND SIDES ONLY. Written as padding:26px 0 0, this also zeroed the bottom padding set above
   for the tab bar, on every system, so "Need help? Chat with support" sat under the bar (2026-10-01). */
main{padding-top:26px;padding-left:0;padding-right:0}

h1{
  margin:0;
  font-family:"Archivo",sans-serif;
  font-variation-settings:"wdth" 106,"wght" 800;
  font-size:clamp(26px,7.2vw,32px);
  line-height:1.08;
  letter-spacing:-.02em;
  text-wrap:balance;
  animation:var(--sk-rise,sk-rise) .6s .06s cubic-bezier(.2,.7,.3,1) both;
}
h1 em{
  font-style:normal;
  background:var(--sk-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding:.06em .1em;margin:-.06em -.1em;
}

/* Group label + rule + count, sticky so a long list always says where you are */
h2{
  position:sticky;top:0;z-index:3;
  display:flex;align-items:center;gap:12px;
  margin:38px 0 12px;padding:14px 2px 12px;
  background:linear-gradient(var(--sk-paper) 62%, rgba(var(--sk-paper-rgb),0));
  font-family:"Archivo",sans-serif;
  font-variation-settings:"wdth" 88,"wght" 700;
  font-size:13px;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--sk-ink-soft);
}
h2::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--sk-line),rgba(var(--sk-line-rgb),0))}

h3{
  margin:0;
  font-family:"Archivo",sans-serif;
  font-variation-settings:"wdth" 104,"wght" 700;
  font-size:18px;line-height:1.22;letter-spacing:-.006em;text-wrap:balance;
}

.sub{margin:8px 0 0;max-width:34ch;font-size:17px;line-height:1.5;color:var(--sk-ink-soft)}
.sub a{color:var(--sk-link)}
.muted{margin-top:3px;font-size:14.5px;color:var(--sk-ink-faint)}

/* ---------------------------------------------------------------- cards */

.card{
  padding:var(--sk-pad);
  border:1px solid var(--sk-line);
  border-radius:var(--sk-r);
  background:var(--sk-card);
  box-shadow:var(--sk-shadow);
  animation:var(--sk-rise,sk-rise) .5s cubic-bezier(.2,.7,.3,1) both;
}
.card + .card{margin-top:10px}

/* Counts: two up on a phone, three on anything wider. Never a row of five
   squeezed to 60px each. */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media (min-width:520px){ .cards{grid-template-columns:repeat(3,1fr)} }
.cards .card{padding:16px 14px;text-align:center}
.cards .n{
  font-family:"Archivo",sans-serif;
  font-variation-settings:"wdth" 100,"wght" 800;
  font-size:28.5px;line-height:1.05;
}
.cards .k{
  margin-top:6px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--sk-ink-faint);
}

/* ------------------------------------------------------------ list rows */

/* THIS IS WHAT REPLACED THE TABLES. A lead is a row you tap, not seven columns
   you squint at. The meta line carries what the columns used to. */
.rows{border:1px solid var(--sk-line);border-radius:var(--sk-r);background:var(--sk-card);box-shadow:var(--sk-shadow);overflow:hidden}
/* ⚠️ min-width:0 ON THE GRID CHILD. A grid item defaults to min-width:auto, so the
   nowrap meta line refused to shrink, pushed the row past the card, and took the pill
   and the date off the right edge entirely. body has overflow-x:clip, so the document
   never scrolled sideways and a scrollWidth check reported "no overflow" while content
   was being cut off. Only the screenshot showed it. */
.row > :first-child{min-width:0}
.row{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;
  padding:14px var(--sk-pad);
  text-decoration:none;color:inherit;
  -webkit-tap-highlight-color:transparent;
}
.row + .row{border-top:1px solid var(--sk-line-soft)}
.row:hover{background:var(--sk-brand-tint)}
.row .nm{font-size:16px;font-weight:600;line-height:1.3}
/* ONE LINE. A long email plus a funnel name wrapped to three lines and made every
   row a different height, which is what turns a list into a wall. Scanning a list
   needs an even rhythm more than it needs the whole address. */
.row .meta{
  margin-top:1px;font-size:14px;line-height:1.4;color:var(--sk-ink-faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.row .when{font-size:12.5px;color:var(--sk-ink-faint);white-space:nowrap;font-variant-numeric:tabular-nums}
/* A lead row carries initials. .lead, not every .row: conversations and alerts
   share .row with two children, and a third column would shift them all. */
.row.lead{grid-template-columns:auto 1fr auto;gap:11px;padding:12px 16px}
/* ⚠️ The text is the SECOND child here. .row > :first-child{min-width:0} now lands on
   the avatar, the text column refuses to shrink past its nowrap meta line, and the pill
   and date are pushed off the right edge -- the exact bug that guard was written for. */
.row.lead > div{min-width:0}
.lav{
  width:34px;height:34px;border-radius:99px;display:grid;place-items:center;
  background:var(--sk-brand-tint);color:var(--sk-link);
  font-size:13px;font-weight:700;letter-spacing:.02em;
}
.row .right{display:flex;flex-direction:column;align-items:flex-end;gap:5px}

/* ---------------------------------------------------------------- pills */

.pill{
  display:inline-block;
  padding:3px 8px;border-radius:999px;
  border:1px solid transparent;background:var(--sk-line-soft);
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--sk-ink-soft);
  white-space:nowrap;
}
.pill.ok{color:var(--sk-ok);background:var(--sk-ok-bg);border-color:transparent}
.pill.warn{color:var(--sk-warn);background:var(--sk-warn-bg);border-color:transparent}
.pill.bad{color:var(--sk-bad);background:var(--sk-bad-bg);border-color:transparent}

/* --------------------------------------------------------------- inputs */

.btn,button{
  display:inline-block;
  padding:11px 16px;
  border:1.5px solid transparent;border-radius:10px;
  background:var(--sk-brand);color:var(--sk-brand-ink,#fff);
  font-family:"Archivo",sans-serif;
  font-variation-settings:"wdth" 100,"wght" 700;
  font-size:15.5px;letter-spacing:0;
  text-decoration:none;text-align:center;cursor:pointer;
  box-shadow:none;
  -webkit-tap-highlight-color:transparent;
}
.btn.ghost,button.ghost{
  background:var(--sk-card);color:var(--sk-ink);
  border:1.5px solid var(--sk-line);box-shadow:none;
}
.btn:active,button:active{transform:translateY(1px)}

input:not([type]),input[type=text],input[type=email],input[type=search],input[type=tel],input[type=password],input[type=number],input[type=url]{
  width:100%;padding:12px 14px;
  border:1px solid var(--sk-line);border-radius:var(--sk-r-sm);
  background:var(--sk-card);color:var(--sk-ink);
  font:inherit;font-size:17.5px;   /* 16px or iOS zooms the page on focus */
}
input::placeholder{color:var(--sk-ink-faint)}
input:focus{outline:3px solid var(--sk-brand-deep);outline-offset:2px;border-color:var(--sk-brand-deep)}

form.search{display:flex;gap:8px;margin:0 0 14px}
form.search input{min-width:0}   /* same trap: width:100% in a flex row overflows */
form.search button{flex:none}

/* minmax(0,1fr): the column is the screen's width, not its widest child's (an email preview
   made the admin email editor 481px wide on a phone, 2026-09-30). */
.field{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:7px;padding:12px 0;border-bottom:1px solid var(--sk-line-soft)}
.field:last-child{border-bottom:0}
.field span{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--sk-ink-faint);
}

/* --------------------------------------------------------------- pieces */

.empty{
  padding:28px var(--sk-pad);
  border:1px dashed var(--sk-line);border-radius:var(--sk-r);
  background:var(--sk-card);
  text-align:center;color:var(--sk-ink-soft);font-size:17px;
}

dl.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 18px;margin:0}
dl.kv dt{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--sk-ink-faint);
  padding-top:3px;
}
dl.kv dd{margin:0;font-size:17px;overflow-wrap:anywhere}
/* A tag is a long name ("nueva no crash plan // hot lead (clicked to dm)"): kept on one line it pushed the
   lead's page wider than the phone (Jeff, 2026-10-04). In the details list a pill wraps. */
dl.kv dd .pill{white-space:normal;max-width:100%}
dl.kv dd a{color:var(--sk-link)}

.timeline{list-style:none;margin:0;padding:0}
.timeline li{position:relative;padding:0 0 18px 18px;border-left:1px solid var(--sk-line);overflow-wrap:anywhere;min-width:0}
/* overflow-wrap: a long link in a message (a rep alert's PDF link) kept the lead's page wider than the
   phone (Jeff, 2026-10-04, after the tags were made to wrap). */
.timeline li::before{content:"";position:absolute;left:-4px;top:6px;width:7px;height:7px;border-radius:50%;background:var(--sk-brand)}
.timeline li:last-child{border-left-color:transparent;padding-bottom:0}
.timeline .when{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:12px;color:var(--sk-ink-faint);
}
.timeline strong{display:block;margin-top:5px;font-size:17px}
.timeline p{margin:4px 0 0;font-size:16px;line-height:1.5;color:var(--sk-ink-soft)}
.timeline dl.answers{margin:8px 0 0;display:grid;gap:12px}
.timeline dl.answers dt{font-size:14px;color:var(--sk-ink-faint);line-height:1.4}
.timeline dl.answers dd{margin:2px 0 0;font-size:16px;line-height:1.45;color:var(--sk-ink)}

/* opportunity + search cards */
.card.opp{border-left:3px solid transparent;border-image:var(--sk-grad) 1;border-top:0;border-right:0;border-bottom:0;
  border:1px solid var(--sk-line);border-left:3px solid var(--sk-brand)}
.opp-top{display:flex;align-items:center;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.card.opp h3 a{color:inherit;text-decoration:none}
.card.opp h3 a:hover{color:var(--sk-link)}
.opp-why{margin:8px 0 0;font-size:17px;line-height:1.5;color:var(--sk-ink-soft)}
.opp-angle{margin:10px 0 0;font-size:17px;line-height:1.5}
.opp-angle strong{color:var(--sk-link);font-weight:700}
.opp-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:16px}
.opp-acts form{display:contents}
.opp-acts .btn,.opp-acts button{padding:10px 14px;font-size:14px}

/* links list */
.linkrow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:14px var(--sk-pad)}
.linkrow > :first-child{min-width:0}
.linkrow + .linkrow{border-top:1px solid var(--sk-line-soft)}
.linkrow .nm{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 104,"wght" 700;font-size:16.5px}
.linkrow .u{
  margin-top:3px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:13px;color:var(--sk-ink-soft);overflow-wrap:anywhere;
}
.linkrow .u a{color:var(--sk-link);text-decoration:none}
.linkrow button{padding:8px 12px;font-size:12.5px}

/* the operator table stays a table: it is a desktop tool for one person */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--sk-r)}
table{width:100%;border-collapse:collapse;background:var(--sk-card);border:1px solid var(--sk-line);border-radius:var(--sk-r);overflow:hidden;box-shadow:var(--sk-shadow)}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--sk-line-soft);font-size:15.5px;vertical-align:top;white-space:nowrap}
th{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--sk-ink-faint);font-weight:400}
tr:last-child td{border-bottom:0}
td a{color:var(--sk-link);text-decoration:none;font-weight:600}

/* --------------------------------------------------------------- log in */

.login{max-width:380px;margin:12vh auto;grid-column:2}
.login .brand{margin:0 0 22px}
.login .brand img{width:150px;max-width:60%}
.login h1{font-size:25.5px}
.login form{margin-top:18px;display:grid;gap:12px}
.login .login-err{margin:16px 0 0}
.note{margin-top:16px;font-size:15.5px;color:var(--sk-ink-soft)}
.note.ok{color:var(--sk-link)}

ul{margin:0;padding-left:20px}
li{font-size:17px;line-height:1.55;color:var(--sk-ink-soft)}
li + li{margin-top:8px}

/* ---------------------------------------------------- layout corrections
   Found by looking at the rendered phone view, which is the only way these
   show up: each one passes every structural check and still reads as clutter. */

/* Three counts in a two-up grid left the third stranded in its own row looking
   like a mistake. An odd last tile spans instead, which reads as deliberate. */
/* ⚠️ SCOPED TO THE TWO-COLUMN CASE. Unscoped, this also caught the THIRD card once
   .cards went 3-across at 520px -- so the desktop hub showed two stats on one row and a
   full-width third, which read as a layout bug because it was one. */
@media (max-width:519px){ .cards .card:last-child:nth-child(odd){grid-column:1/-1} }

/* Eight platform buttons as free-flowing pills wrapped into three ragged rows
   and dominated the card. A grid puts them in two even rows on a phone. */
.platforms{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:16px}
@media (min-width:420px){ .platforms{grid-template-columns:repeat(4,1fr)} }
.platforms .btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 6px;font-size:12.5px;letter-spacing:.06em;
}
/* The glyph inherits the button's ink rather than the brand's own hex. Eight brand
   colours in one card fights the palette, and the SHAPE is what carries recognition --
   nobody identifies Reddit by the orange alone. Switching to brand colour is one rule
   here if we ever want it. */
.platforms .btn svg{flex:none;display:block}
.platforms .btn span{white-space:nowrap}

/* Below ~360px, eight labelled buttons stop fitting three-up. Drop the label and let
   the mark stand alone rather than shrinking the type past legibility. */
@media (max-width:359px){
  .platforms{grid-template-columns:repeat(4,1fr)}
  /* The glyph alone, but the NAME still reaches a screen reader: the link carries an
     aria-label, so hiding the text here costs nothing to anyone not looking at it. */
  .platforms .btn span{display:none}
  .platforms .btn svg{width:17px;height:17px}
  .platforms .btn{padding:12px 4px}
}

.opp-note{
  margin:14px 0 0;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:12px;line-height:1.5;letter-spacing:.02em;color:var(--sk-ink-faint);
}

/* ------------------------------------------------------- conversations */

/* The unread count beside a name in the list. The TAB carries a dot instead: a number on
   five tabs turns into decoration, and the count belongs on the screen that can act on it.
   Sized in em so it
   tracks whatever it sits next to instead of needing a value per context. */
.badge{
  display:inline-block;margin-left:7px;padding:1px 7px;
  border-radius:999px;
  background:var(--sk-accent);color:#fff;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.72em;font-weight:500;line-height:1.55;
  vertical-align:middle;
}

/* Unread is carried by WEIGHT and a brand rule, not by a background wash. A tinted
   row competes with .row:hover, so on a phone every row you touched looked unread. */
.row.unread{border-left:3px solid var(--sk-brand)}
.row.unread .nm{font-weight:700}
.row.unread .meta{color:var(--sk-ink)}

.thread{display:grid;gap:10px;margin:18px 0 22px}

.bubble{
  max-width:82%;
  padding:11px 14px;
  border-radius:var(--sk-r);
  font-size:17.5px;
  box-shadow:var(--sk-shadow);
}
.bubble p{margin:0;overflow-wrap:anywhere;white-space:pre-line}   /* a pasted URL must not widen the column */
.bubble strong{display:block;margin-bottom:3px;font-size:16px}
.bubble .when{
  margin-top:6px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;
}

/* THEM on the left in paper-white, US on the right in brand. The asymmetry is the
   whole point: a rep scanning a thread should not have to read it to know who spoke. */
/* Who sent the bubble below it, in words (2026-10-06) */
.bubble-who{margin:6px 4px -6px;font-size:12.5px;font-weight:700;color:var(--sk-ink-faint)}
.bubble-who.them{justify-self:start}
.bubble-who.us{justify-self:end}
.bubble.them{justify-self:start;background:var(--sk-card);border:1px solid var(--sk-line);border-bottom-left-radius:6px}
.bubble.them .when{color:var(--sk-ink-faint)}
.bubble.us{justify-self:end;background:var(--sk-grad);color:#fff;border-bottom-right-radius:6px}
.bubble.us .when{color:rgba(255,255,255,.72)}
.bubble.us .pill.bad{background:rgba(255,255,255,.22);color:#fff}

form.reply{
  display:grid;gap:9px;
  padding:var(--sk-pad);
  border:1px solid var(--sk-line);border-radius:var(--sk-r);
  background:var(--sk-card);box-shadow:var(--sk-shadow);
  position:sticky;bottom:12px;   /* stays reachable one-handed in a long thread */
}
form.reply textarea{
  width:100%;padding:11px 13px;
  border:1px solid var(--sk-line);border-radius:var(--sk-r-sm);
  background:var(--sk-paper);color:var(--sk-ink);
  font:inherit;font-size:17.5px;   /* 16px or iOS zooms on focus */
  resize:vertical;
}
form.reply textarea:focus{outline:3px solid var(--sk-brand-deep);outline-offset:2px;border-color:var(--sk-brand-deep)}

/* Text / Email picker. Radios, so it works with no JavaScript. */
.seg{display:flex;flex-wrap:wrap;gap:6px}   /* wraps: a translated label runs longer (app-words.mjs) */
.seg label{flex:none;cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{
  display:block;padding:6px 13px;
  border:1px solid var(--sk-line);border-radius:999px;
  color:var(--sk-ink-soft);
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 100,"wght" 600;
  font-size:14.5px;
}
.seg input:checked + span{background:var(--sk-brand-tint);border-color:rgba(var(--sk-brand-rgb),.45);color:var(--sk-link)}
.seg input:focus-visible + span{outline:3px solid var(--sk-brand-deep);outline-offset:2px}
/* Text before texting is set up: shown, greyed, not pickable (the note below says why). */
.seg-off{display:block;padding:6px 13px;border:1px dashed var(--sk-line);border-radius:999px;color:var(--sk-ink-soft);
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 100,"wght" 600;font-size:14.5px}
button.seg-off{background:transparent;box-shadow:none;width:auto;min-height:0;line-height:inherit;cursor:pointer}   /* opens the "texting isn't on" pop-up */
/* The subject only for email, the texting line only for text: :has() keeps it free of script. */
form.reply .reply-subj{width:100%;padding:10px 13px;border:1px solid var(--sk-line);border-radius:var(--sk-r-sm);
  background:var(--sk-paper);color:var(--sk-ink);font:inherit;font-size:16.5px}
form.reply:has(input[name=channel][value=sms]:checked) .reply-subj{display:none}
form.reply .text-only{display:none}
form.reply:has(input[name=channel][value=sms]:checked) .text-only{display:block}
.reply-note{margin:0;font-size:14px;line-height:1.45;color:var(--sk-ink-soft)}
.reply-note a{font-weight:600;color:var(--sk-link)}
ul.rules{margin:0;padding-left:20px;display:grid;gap:6px;color:var(--sk-ink-soft)}

.notice{
  margin:0 0 14px;padding:11px 14px;
  border-radius:var(--sk-r-sm);
  font-size:16.5px;
}
.notice.ok{background:var(--sk-ok-bg);color:var(--sk-ok)}
.notice.bad{background:var(--sk-bad-bg);color:var(--sk-bad)}

/* ------------------------------------------------------- the buy funnel */

/* Where you are in the sequence. The GHL funnel has fifteen steps and no indicator, so
   a buyer cannot tell whether the next click charges them again -- which is exactly the
   anxiety that makes people abandon an upsell chain. */
.progress{display:flex;gap:7px;margin:0 0 20px;flex-wrap:wrap}
.progress span{
  padding:4px 11px;border-radius:999px;
  border:1px solid var(--sk-line);background:var(--sk-card);color:var(--sk-ink-faint);
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;
}
.progress .done{background:var(--sk-brand-tint);border-color:transparent;color:var(--sk-link)}
.progress .now{background:var(--sk-grad);border-color:transparent;color:#fff}

.stack{display:grid;gap:4px}
.stack .field{border-bottom:0;padding:8px 0}
.stack .field small{color:var(--sk-ink-faint);font-size:14.5px}

.tiers{display:grid;gap:12px;margin-top:14px}
.tier{padding:var(--sk-pad);border:1px solid var(--sk-line);border-radius:var(--sk-r);background:var(--sk-paper)}
.tier h3,.offer h3{
  margin:0 0 4px;font-family:"Archivo",sans-serif;
  font-variation-settings:"wdth" 105,"wght" 700;font-size:18.5px;text-transform:uppercase;
}
.tier p,.offer p{margin:0 0 12px;color:var(--sk-ink-soft);font-size:17px}

/* The price is the LABEL of the button, not text beside it. One tap, and what you are
   agreeing to is written on the thing you tapped. */
.picks{display:flex;gap:9px;flex-wrap:wrap}
.picks .btn{flex:1 1 auto;display:grid;gap:1px;padding:11px 16px;line-height:1.15}
.picks .btn small{display:block;font-size:12.5px;opacity:.82;font-weight:400;text-transform:none;letter-spacing:0}

.offer{margin-top:14px;margin-bottom:12px}   /* it sat flush against the card above it */
.offer h3 .pill{vertical-align:middle;margin-left:6px}
.offer .added{margin:0;color:var(--sk-ok);font-size:17px}

/* The decline is a plain link, never a button. A styled "no thanks" competing with the
   offer is the dark-pattern version of this page. */
.skip{margin:16px 0 0;text-align:center}
.skip a{color:var(--sk-ink-faint);font-size:16px}

.notice.warn{background:var(--sk-warn-bg);color:var(--sk-warn)}


/* =====================================================================
   DESKTOP  —  the app is not a phone artefact

   SHARK-DESIGN-SYSTEM §9 leaves this open deliberately: a links hub
   genuinely IS a phone thing, a training page is not. The buyer app is
   not either -- it is opened on a laptop to work through leads, and the
   how-to pages already set the precedent of widening at 900px.

   WHAT WIDENS AND WHAT DOES NOT is the whole point. Lists, rows and card
   grids get the width because scanning benefits from it. PROSE DOES NOT:
   a 1080px line of body text is measurably harder to read than a 65ch
   one, so paragraphs keep a ch-based measure (§: "constrain prose with a
   ch measure, not a pixel width"). Widening everything is not a desktop
   layout, it is a stretched phone.
   ===================================================================== */

@media (min-width:900px){
  /* The measure is still a GRID COLUMN, never margin:auto -- a component
     setting the `margin` shorthand would reset it and the page would
     drift left while the header stayed centred. (§1) */
  body{grid-template-columns:1fr min(1080px,100%) 1fr;padding-left:32px;padding-right:32px}

  main{padding-top:34px}

  /* Prose keeps its measure even though the column grew. */
  .sub,
  .card > p,
  .empty{max-width:68ch}

  /* ⚠️ auto-fit, NOT repeat(2,1fr). A fixed two-column grid left a SINGLE opportunity
     stranded in the left half with an empty column beside it -- which reads as a missing
     card rather than a deliberate layout. auto-fit lets one card take the full width and
     two sit side by side, so the grid follows the content instead of the content having
     to fill the grid. */
  .opps{display:grid;grid-template-columns:repeat(auto-fit,minmax(460px,1fr));gap:14px;align-items:start}

  /* Offers and tiers sit side by side rather than stacking a screen deep. */
  .tiers{grid-template-columns:repeat(2,1fr)}
  .offer{margin-bottom:0}
  .offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:12px;align-items:start}

  /* A message bubble must NOT grow to 1080px. A chat line that wide stops
     reading as a message and the left/right asymmetry that tells you who
     spoke gets lost. */
  .bubble{max-width:min(62%,560px)}

  /* The reply box stops being sticky: there is no thumb reach problem on a
     desktop, and a pinned box just eats vertical space. */
  form.reply{position:static}

  /* Rows get the width -- that is what they are for. Give the name room to
     breathe against the meta line. */
  .row{padding:15px 18px}
  .rows{border-radius:var(--sk-r)}
}

@media (min-width:1240px){
  /* Three stats across stays right; the leads list gains nothing from more
     than ~1080px, so the column stops growing rather than sprawling. */
  body{grid-template-columns:1fr min(1140px,100%) 1fr}
}

/* --------------------------------------------------- the page builder
   Reuses .field throughout; these are the few shapes it adds. */

/* A textarea was never styled because nothing had one until reps started writing their
   own pages. Same rules as the inputs, including the 16px that stops iOS zooming. */
textarea{
  width:100%;padding:12px 14px;
  border:1px solid var(--sk-line);border-radius:var(--sk-r-sm);
  background:var(--sk-card);color:var(--sk-ink);
  font:inherit;font-size:17.5px;line-height:1.5;resize:vertical;
}
textarea:focus{outline:3px solid var(--sk-brand-deep);outline-offset:2px;border-color:var(--sk-brand-deep)}

/* The helper line under a field. Sentence case on purpose: .field span is the uppercase
   mono label, and a hint that shouted would compete with it. */
.field small{color:var(--sk-ink-faint);font-size:14.5px;line-height:1.45}
.field small strong{color:var(--sk-ink);font-weight:600}

/* A choice reads left to right: the control, then what it means. `.plain` opts out of the
   uppercase mono treatment .field span carries, since this one is a sentence. */
.field.choice{grid-template-columns:auto 1fr;align-items:start;gap:11px}
.field.choice input{width:auto;margin-top:3px}
.field.choice .plain{
  font-family:inherit;font-size:16.5px;letter-spacing:normal;text-transform:none;color:var(--sk-ink);
}
/* Its hint line too: ".field span" reached the inner <span class="sub"> and set it in the
   spaced grey capitals of a field label (Account's reply choices, Notifications). */
.field.choice .plain span{font-family:inherit;font-size:15px;letter-spacing:normal;text-transform:none;color:var(--sk-ink-soft)}
/* Every tick box and radio in the system's colour, not the browser's blue. */
input[type=checkbox],input[type=radio]{accent-color:var(--sk-brand)}

.rowtop{display:flex;align-items:center;gap:9px;justify-content:space-between}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:14.5px;word-break:break-all}
.card.ok{border-color:var(--sk-ok);background:var(--sk-ok-bg)}
.card.bad{border-color:var(--sk-bad);background:var(--sk-bad-bg)}

/* A held-submissions banner. A link that looks like a warning, because it is explaining a
   silence the rep has already noticed and is worried about. */
.heldbar{display:block;text-decoration:none;color:inherit}
.heldbar:hover{border-color:var(--sk-bad)}
.heldbar .sub{display:block;margin-top:3px}
.plainlist{margin:8px 0 0;padding-left:18px;display:grid;gap:7px}
.plainlist li{font-size:16px;line-height:1.5;color:var(--sk-ink-soft)}
.plainlist strong{color:var(--sk-ink)}

/* A notification row's icon. Emoji rather than an inlined set, because these are five
   fixed meanings and a sprite would be five more things to keep in step. */
.nico{width:32px;height:32px;border-radius:9px;background:var(--sk-brand-tint);
  display:grid;place-items:center;flex:none;font-size:17px}
/* A notification: icon, then its title over one line of detail. The lead row's two columns
   put the icon first and squeezed title and detail into one run ("You got a new leadLeah"). */
.row.nrow{grid-template-columns:auto 1fr}
.nrow .t{display:grid;gap:2px;min-width:0}
.nrow .t b{font-size:16px;font-weight:600;line-height:1.3}
.nrow .t span{font-size:14px;line-height:1.4;color:var(--sk-ink-faint)}

/* =========================================================== the daily shape
 *
 * Ported from the clickable prototype Jeff showed Joe, because the live app had
 * the same routes and did not FEEL like it: three outsized stat cards, then a
 * wall of text. Joe, 2026-09-27: "lots of pages, not a lot on each page." The
 * home screen is now a greeting, one hero, and a short stack of tappable rows.
 *
 * ⚠️ THE PALETTE DOES NOT COME WITH IT. The prototype is GLP forest-and-orange;
 * these are the same --sk-* nine every other surface uses, so a tenant reskin
 * still reaches this screen. What was copied is the SHAPE, not the colours.
 */

/* mono eyebrow. Quieter than h2's sticky rule, for labelling one block rather
   than opening a section. */
.lbl{
  display:block;margin:0 0 9px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sk-ink-faint);
}

.greet{animation:var(--sk-rise,sk-rise) .5s cubic-bezier(.2,.7,.3,1) both}
.greet h1{text-transform:none;font-variation-settings:"wdth" 106,"wght" 800;font-size:clamp(26px,7.2vw,32px)}
.greet p{margin:4px 0 0;font-size:16px;color:var(--sk-ink-faint)}

/* Three numbers as a strip, not three full-width cards. The old ones stacked to
   a third of a phone screen and pushed everything the rep came for below the
   fold -- a count is a glance, not a headline. */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.stat{
  padding:11px 12px;border:1px solid var(--sk-line);border-radius:var(--sk-r-sm);
  background:var(--sk-card);box-shadow:var(--sk-shadow);
  animation:var(--sk-rise,sk-rise) .5s cubic-bezier(.2,.7,.3,1) both;
}
.stat b{
  display:block;font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 100,"wght" 800;
  font-size:23px;line-height:1;font-variant-numeric:tabular-nums;
}
.stat span{display:block;margin-top:4px;font-size:12px;line-height:1.3;color:var(--sk-ink-faint)}
.stat.up b{color:var(--sk-brand)}

/* The hero. One thing to do today, and it is dark so it cannot be mistaken for
   another card in the stack. */
.today{
  display:block;margin-top:18px;padding:17px;
  border-radius:var(--sk-r);background:var(--sk-grad);color:#fff;text-decoration:none;
  box-shadow:var(--sk-shadow-lift);
  animation:var(--sk-rise,sk-rise) .5s .04s cubic-bezier(.2,.7,.3,1) both;
}
/* ⚠️ Fixed light-on-dark values inside, NOT palette tokens. This card is dark on
   every tenant; --sk-ink-faint here would resolve to a colour meant for paper. */
.today .lbl{color:rgba(255,255,255,.92)}
.today h3{font-size:19px;line-height:1.22;color:#fff}
.today .src{display:flex;align-items:baseline;gap:7px;margin:10px 0 0;font-size:14.5px;color:rgba(255,255,255,.92)}
.today .src i{flex:none;width:5px;height:5px;border-radius:9px;background:#8BF0B0;transform:translateY(-2px)}
.today .why{margin:11px 0 0;font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.86)}
.today .platforms{margin-top:14px;grid-template-columns:repeat(4,1fr)}
.today .platforms .btn span{display:none}
.today .platforms .btn{padding:11px 4px;display:grid;place-items:center}
.today .platforms .btn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}
.today .platforms .btn:hover{background:rgba(255,255,255,.18)}

/* A tappable row: icon tile, two lines, then either a chevron or a count.
 *
 * ⚠️ .mrow, NOT .row. .row is the LEAD row and carries .nm/.meta/.right; one
 * class for both meant every menu row inherited a lead's layout. Different
 * thing, different name.
 */
.stack{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:16px}
/* The grid's gap spaces its cards: the stacked-card margin would drop every card after the first out of line
   with its neighbour (Jeff, 2026-10-07, Admin > Pick a system: "uneven boxes"). */
.stack > .card,.cards > .card{margin-top:0}
.stack > .card.rowlink{align-content:start}
/* A page's intro line keeps a gap above the card or buttons under it. */
p.sub + .card,p.sub + form,p.sub + .stack{margin-top:14px}
/* A form that follows a card ("Remove this campaign", "Delete this page") is not glued to it. */
.card + form:not(.card),.stack + form:not(.card){margin-top:16px}
/* A state pill in a card link keeps its own width ("No domain yet" spanned the card). */
.card.rowlink > .pill{justify-self:start}
/* A wide table scrolls inside its card on a phone instead of pushing the page wider. */
.card:has(table){overflow-x:auto}
.card p{overflow-wrap:anywhere}
.mrow{
  display:flex;align-items:center;gap:11px;
  padding:12px 13px;border:1px solid var(--sk-line);border-radius:var(--sk-r-sm);
  background:var(--sk-card);box-shadow:var(--sk-shadow);
  text-decoration:none;color:inherit;
  transition:border-color .15s,transform .14s;
  animation:var(--sk-rise,sk-rise) .5s cubic-bezier(.2,.7,.3,1) both;
}
.mrow:hover{border-color:var(--sk-brand)}
.mrow:active{transform:translateY(1px)}
.rico{
  flex:none;width:32px;height:32px;border-radius:9px;
  display:grid;place-items:center;background:var(--sk-brand-tint);
}
.rico svg{width:16px;height:16px;fill:none;stroke:var(--sk-brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mrow .t{display:grid;gap:1px;min-width:0}
.mrow .t b{font-size:16px;font-weight:600;line-height:1.3}
.mrow .t span{font-size:13px;line-height:1.4;color:var(--sk-ink-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow .chev{margin-left:auto;flex:none;color:var(--sk-ink-faint);display:grid}
.mrow .chev svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mrow .count{
  margin-left:auto;flex:none;padding:2px 8px;border-radius:99px;
  background:var(--sk-brand-deep);color:#fff;
  font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;
}

/* Funnel cards. Title and state, what it is, the one link, two actions. */
.fstack{display:grid;gap:10px}
.fcard{
  display:grid;gap:9px;padding:14px;
  border:1px solid var(--sk-line);border-radius:var(--sk-r);
  background:var(--sk-card);box-shadow:var(--sk-shadow);
  animation:var(--sk-rise,sk-rise) .5s cubic-bezier(.2,.7,.3,1) both;
}
.fcard .top{display:flex;align-items:center;gap:9px;justify-content:space-between}
.fcard .top b{
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 100,"wght" 700;
  font-size:17px;line-height:1.25;letter-spacing:-.01em;min-width:0;
}
.fcard .top .pill{flex:none}
.fcard .what{font-size:14px;line-height:1.4;color:var(--sk-ink-faint)}
/* The URL is shown, never wrapped: a link broken across two lines reads as two
   things and cannot be read aloud to anyone. Copy is what carries the whole of it. */
.fcard .url{
  padding:9px 11px;border:1px dashed var(--sk-line);border-radius:8px;background:var(--sk-paper);
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:13px;color:var(--sk-ink-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fcard .acts{display:flex;gap:7px}
.fcard .acts > *{flex:1;padding:9px 12px;font-size:14.5px}
.fcard details.more summary{
  cursor:pointer;list-style:none;font-size:14px;font-weight:600;color:var(--sk-link);padding:2px 0;
}
.fcard details.more summary::-webkit-details-marker{display:none}
.fcard details.more summary::after{content:" +"}
.fcard details.more[open] summary::after{content:" \2013"}
.fcard details.more .linkrow{padding:10px 0;border-top:1px solid var(--sk-line-soft)}
.fcard details.more .linkrow .u{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}


/* Contact actions, Joe's pair: Email {name} and Call. */
.acts2{display:flex;gap:8px;margin-top:14px}
.acts2 > *{flex:1}
.acts2 + .card{margin-top:14px}

/* ============================================================== desktop
 *
 * At 900px and up the app stops pretending to be a phone.
 *
 * ⚠️ THE TAB BAR BECOMES A SIDEBAR. Five tabs spread along the bottom of a 1440px
 * screen put Home and Account a monitor's width apart, at the edge the eye never
 * visits. Same five links, same order, same markup -- only the layout moves, so a
 * route cannot exist on one width and not the other.
 *
 * ⚠️ THE COLUMN STOPS AT ~860px, not 1140. The screens are now a phone's worth of
 * rows, and a row stretched to 1140 puts its chevron a hand-span from its label and
 * turns a stat card into an empty box. Where there is spare width, the content
 * goes two-up (navigation rows, funnel cards) instead of getting wider.
 *
 * Placed LAST on purpose: it overrides the 900/1240 column widths above at equal
 * specificity, so it has to win on source order.
 */
@media (min-width:900px){
  body{
    grid-template-columns:1fr min(860px,100%) 1fr;
    padding-left:calc(236px + 40px);padding-right:40px;
  }
  /* No side menu on this page (sign-in, the marketingshark.app picker, error pages): the room
     kept for it pushed the content right of centre (Jeff, 2026-10-01: "the pages you make arent
     always centered"). */
  body:not(:has(.tabs)){padding-left:40px}

  .tabs{
    top:0;bottom:0;left:0;right:auto;width:236px;
    display:flex;flex-direction:column;gap:4px;
    padding:24px 14px;
    border-top:0;border-right:1px solid var(--sk-line);
    background:var(--sk-card);
  }
  .tabs a{
    display:flex;align-items:center;justify-content:flex-start;gap:12px;
    padding:11px 14px;font-size:15.5px;
  }
  .tabs .dot{top:50%;right:14px;transform:translateY(-50%)}

  /* The menu's dropdowns (shared.mjs SUBS): a section with pages of its own opens to list
     them, and the section you are in starts open. The plain tab beside it is the phone's. */
  .tabs a.tab.hassub{display:none}
  .tabs .tabgrp{display:block}
  .tabs .tabgrp summary{
    display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:11px;cursor:pointer;list-style:none;
    color:var(--sk-ink-faint);font-family:"Archivo",sans-serif;font-variation-settings:"wght" 600;font-size:15.5px;
  }
  .tabs .tabgrp summary::-webkit-details-marker{display:none}
  .tabs .tabgrp summary svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
  .tabs .tabgrp summary[aria-current]{color:var(--sk-link);background:var(--sk-brand-tint)}
  .tabs .tabgrp .chev{margin-left:auto;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .15s}
  .tabs .tabgrp[open] .chev{transform:rotate(-135deg)}
  .tabs .tabgrp a{display:block;padding:8px 14px 8px 47px;font-size:14.5px;border-radius:9px}
  .tabs .tabgrp a[aria-current]{color:var(--sk-link);background:none;font-variation-settings:"wght" 700}
  .tabs .tabgrp a:hover{background:var(--sk-brand-tint)}

  /* no bottom bar to clear any more */
  main{padding-bottom:56px}

  /* Two to a row for a LIST OF CARDS only. A form, a card's own fields, and steps that run in order stay one
     column (Jeff, 2026-10-07, admin once-over: forms split across the grid, Save buttons the height of the
     form beside them, a follow-up's steps read out of order). */
  div.stack:not(.card):not(.rows):not(.fsteps):not(.branchbody):not(.addsteps):not(:has(> .steprow)):not(:has(> form)):has(> .card){grid-template-columns:1fr 1fr}
  /* a lone row spans the grid rather than leaving an empty half beside it */
  .stack > :only-child{grid-column:1/-1}
  .fstack{grid-template-columns:repeat(auto-fit,minmax(360px,1fr));align-items:start}
  .opps{grid-template-columns:1fr}
}

/* ---- admin: the funnel editor (admin-funnels.mjs) ---- */
.crumbs{margin:0 0 6px;font-size:14.5px;color:var(--sk-ink-faint)}
.crumbs a{color:var(--sk-link);text-decoration:none}
.card.rowlink{display:grid;gap:4px;text-decoration:none;color:var(--sk-ink)}
.card.rowlink .muted,.steprow .muted{font-size:14.5px;overflow-wrap:anywhere}
/* Admin > Lead gen: the system filter (0184). Wraps on a phone rather than scrolling sideways. */
.lg-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.lg-filter .btn{padding:8px 14px;font-size:14.5px}
.steprow{display:flex;gap:10px;align-items:center;justify-content:space-between}
.stepmain{display:grid;gap:4px;min-width:0}
.stepmain a{color:var(--sk-ink);text-decoration:none}
.stepbtns{display:flex;gap:6px;flex:none}
.stepbtns form{margin:0}
button.small{padding:6px 11px;font-size:15px}
label.choice{display:flex;gap:9px;align-items:center;padding:4px 0;font-size:16.5px}
label.choice input{width:auto;margin:0}
select{width:100%;padding:12px 14px;border:1px solid var(--sk-line);border-radius:var(--sk-r-sm);
  background:var(--sk-card);color:var(--sk-ink);font:inherit;font-size:17px}
[data-for][hidden]{display:none}
.card.stack a:not(.btn),.sub a{color:var(--sk-brand)}
.btnrow{display:flex;gap:8px;flex-wrap:wrap}
.edbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.edbar select{width:auto;flex:1;min-width:0}
iframe.emailedit{width:100%;min-height:420px;border:1px solid var(--sk-line);border-radius:var(--sk-r-sm);background:#fff}
iframe.preview{width:100%;height:260px;border:1px solid var(--sk-line);border-radius:var(--sk-r-sm);background:#fff}
textarea{width:100%;padding:12px 14px;border:1px solid var(--sk-line);border-radius:var(--sk-r-sm);background:var(--sk-card);color:var(--sk-ink);font:inherit;font-size:16.5px}
#raw{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:13px}
details.field summary{cursor:pointer;color:var(--sk-brand)}
/* A 600px-wide email must not push the page wider than a phone: every child of a form card
   may shrink, and the editor frame is a block that never exceeds its column. */
.card.stack > *,.field{min-width:0}
iframe.emailedit,iframe.preview{display:block;max-width:100%}
.field input,.field select,.field textarea{max-width:100%}
.waitrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0}
.waitrow input[type=number]{width:80px;padding:9px 10px;border:1px solid var(--sk-line);border-radius:var(--sk-r-sm);font:inherit;font-size:16.5px}
.waitrow select{width:auto;flex:1;min-width:0;padding:9px 10px;font-size:16px}
.stepmain .waitrow{margin-top:2px}
[data-kind][hidden]{display:none}

/* a colour picker (the quiz's look, 0068): a swatch, not a stretched text box */
input[type=color]{width:64px;height:44px;padding:3px;border:1px solid var(--sk-line);border-radius:var(--sk-r-sm);background:var(--sk-card);cursor:pointer}

/* the wallet (0069) */
.wallet-bal{font-size:28px;line-height:1.2}
.wallet-add{display:flex;flex-wrap:wrap;gap:8px}
.wallet-add button{flex:1 1 90px;white-space:nowrap;padding-left:10px;padding-right:10px}
.wallet-line{display:flex;justify-content:space-between;gap:12px;margin:0}
.wallet-line > span:first-child{min-width:0}


/* a follow-up's branch (0072): its "if yes" / "otherwise" steps, indented under the condition */
.branch{border-left:3px solid var(--sk-line);padding-left:12px;margin-top:6px}
.branch > p{margin:0 0 6px}
.branch details{margin-top:8px}
.branch summary{cursor:pointer;color:var(--sk-brand);font-weight:600;font-size:15px}
.addsteps{gap:10px}
/* Steps wrap on a phone: the buttons drop under the step instead of pushing the page wide. */
.steprow{flex-wrap:wrap}
.steprow > .stepmain{flex:1 1 220px}
.waitrow input[type=text]{flex:1 1 140px;width:auto;min-width:0}
/* A branch: its own buttons first, at the right, then the condition and both sides full width. */
.branchrow{flex-direction:column;align-items:stretch}
.branchrow > .stepmain{flex:none;width:100%}
.branchbody{min-width:0}
.branch .card{padding:12px}
/* A grid column sizes to its widest content unless told otherwise; this one stays inside the card. */
.stepmain{grid-template-columns:minmax(0,1fr)}
.waitrow select{min-width:96px;flex:1 1 170px}
/* a rep's own domain (0073): each DNS record to copy */
.dnsrec code{word-break:break-all;font-size:14px;background:var(--sk-brand-tint);padding:2px 6px;border-radius:6px}
.dnsrec p{margin:0}

/* Admin accounts list (0081): filter chips that wrap on a phone. */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.btn.sm{padding:7px 12px;font-size:14px;min-height:0}
/* View as a rep (admin): a bar at the top of every screen of theirs. */
.viewas{position:sticky;top:0;z-index:30;background:#1f1147;color:#fff;border-radius:10px;padding:10px 14px;margin:0 0 14px;font-size:14px}
.viewas a{color:#fff;font-weight:600;margin-left:6px}
button.danger{background:#b42318;border-color:#b42318;color:#fff}
/* Share Shark (Three and Free): three dots, filled as referrals pay. */
.tf-dots{display:flex;gap:10px}
.tf-dot{width:26px;height:26px;border-radius:50%;border:2px solid var(--sk-line,#d9d4e6);background:transparent}
.tf-dot.on{background:var(--sk-brand,#6d28d9);border-color:var(--sk-brand,#6d28d9)}
/* Quick start (0084): a popup the first time, a page after. The shadow is the backdrop, since
   the dialog is opened by markup (no showModal, so no ::backdrop). */
dialog.qs{position:fixed;inset:0;z-index:2000;margin:auto;width:calc(100% - 32px);max-width:540px;max-height:calc(100dvh - 48px);
  overflow:auto;border:0;border-radius:18px;padding:22px 20px;background:var(--sk-card,#fff);color:inherit;
  box-shadow:0 0 0 100vmax rgba(17,12,40,.55),0 20px 60px rgba(0,0,0,.3)}
.qs-title{font-size:24px;font-weight:800;line-height:1.2;margin:0 0 6px;letter-spacing:-.01em}
.qs-video{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;margin:10px 0 4px}
.qs-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.qs-steps{margin:12px 0 16px;padding-left:22px;display:grid;gap:12px}
.qs-steps li strong{display:block}
.qs-steps li .sub{display:block;margin:2px 0 4px}
.qs-steps li a{font-weight:600;color:var(--sk-brand-deep,#5b21b6);text-decoration:none}   /* the deep shade, like every other link */
dialog.qs form button{width:100%}
/* Support on every rep page (0084). */
.helpline{text-align:center;font-size:15px;margin:36px 0 8px}
.helpline a{color:var(--sk-link);font-weight:600}
/* The support chat (GHL's widget) sizes itself from these. At its own 592px the form ran past the
   bottom of its box and Send was only reachable by scrolling inside the box, which nobody does
   (Jeff, 2026-10-02: "the submit button isnt showing"). Tall enough for the whole form, and never
   wider than the screen. Outside rules beat the widget's own :host values. */
.support-widget{min-height:820px;margin:10px 0}
.support-widget chat-widget{--chat-widget-height:820px;--chat-widget-width:100%;--chat-widget-max-height:none;display:block;max-width:100%}
/* body > * are each their own layer (z-index:1), so the popup cannot rise out of <main> on its
   own: lift <main> above the header (20) and tab bar (30) while it is open. */
main:has(> dialog.qs[open]){z-index:2000}
/* The menu (0086): Training, Support and the rest, from the header on every rep screen. */
details.menu{position:relative}
/* On a phone the menu lines up with the bar's right edge, inside the page margin, not under its button (2026-10-06) */
@media (max-width:760px){details.menu{position:static}.appbar .menu-panel{right:0;max-height:calc(100vh - 190px - env(safe-area-inset-bottom,0px));max-height:calc(100dvh - 190px - env(safe-area-inset-bottom,0px))}}
details.menu > summary{list-style:none;cursor:pointer}
details.menu > summary::-webkit-details-marker{display:none}
/* It scrolls inside itself (2026-10-25, Jeff: "when i click the hamburger menu i cant scroll to sign out"): 15 items ran
   958px tall on a 664px phone screen, under the tab bar, with Sign out last. It stops above the tab bar on a phone. */
.menu-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:50;min-width:248px;display:grid;padding:8px;
  max-height:calc(100vh - 110px);max-height:calc(100dvh - 110px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:var(--sk-card,#fff);border:1px solid var(--sk-line,#e6e1f0);border-radius:14px;box-shadow:0 14px 40px rgba(20,12,50,.18)}
.menu-panel a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;text-decoration:none;color:inherit;font-weight:600}
.mi-ic{display:grid;place-items:center;flex:none;width:24px;height:24px;color:var(--sk-link)}
.mi-ic svg{width:23px;height:23px}
.mi-ic.mi-emoji{font-size:19px;line-height:1}
.rico.rico-emoji{font-size:20px;line-height:1}
.menu-panel a:hover,.menu-panel a:focus-visible{background:var(--sk-tint,#f3effc)}
/* the accounts at the top of the menu, for someone with more than one (shared.mjs) */
.mi-h{margin:4px 14px 2px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sk-ink-faint)}
.menu-panel a.mi-acct{font-weight:500}
.menu-panel a.mi-acct[aria-current]{font-weight:700;color:var(--sk-link)}
.mi-sep{border:0;border-top:1px solid var(--sk-line,#e6e1f0);margin:6px 8px}
.cal{position:relative;width:100%;height:520px;border-radius:12px;overflow:hidden}
.cal iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* "How do I find this?" under a setup question (0092). */
.linkish{justify-self:start;background:none;border:0;padding:0;font:inherit;font-size:14px;font-weight:600;color:var(--sk-link,#6d28d9);text-decoration:underline;cursor:pointer;width:auto;min-height:0;box-shadow:none}
dialog.howto{width:calc(100% - 32px);max-width:480px;max-height:calc(100dvh - 48px);overflow:auto;border:0;border-radius:18px;
  padding:22px 20px;background:var(--sk-card,#fff);color:inherit;box-shadow:0 20px 60px rgba(0,0,0,.3)}
dialog.howto::backdrop{background:rgba(17,12,40,.55)}
dialog.howto ol{margin:0 0 16px;padding-left:20px;display:grid;gap:12px;line-height:1.5}
dialog.howto li strong{display:block}
dialog.howto [data-close]{width:100%}
dialog.pz-need{position:fixed;inset:0;margin:auto;height:max-content}dialog.pz-need p{line-height:1.5;margin:0 0 16px}dialog.pz-need{text-align:center;padding:28px 22px 18px}
.pz-need-brain{width:76px;height:76px;margin:0 auto 14px;display:grid;place-items:center;font-size:40px;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--sk-ai) 30%,#fff) 0%,color-mix(in srgb,var(--sk-ai) 14%,#fff) 60%,transparent 72%);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--sk-ai) 10%,transparent),0 12px 30px -10px var(--sk-ai-deep);animation:pz-brain 3.2s ease-in-out infinite}
@keyframes pz-brain{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.04)}}
@media (prefers-reduced-motion:reduce){.pz-need-brain{animation:none}}
.pz-need-dots{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin:-4px 0 18px}
.pz-need-dots i{width:10px;height:10px;border-radius:50%;background:color-mix(in srgb,var(--sk-ai) 18%,#fff);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--sk-ai) 45%,transparent)}
.pz-need-dots i.on{background:var(--sk-ai);box-shadow:0 0 8px color-mix(in srgb,var(--sk-ai) 60%,transparent)}
#pz-need-h{outline:none}.pz-need-acts{display:grid;gap:4px}
.pz-need-acts .ai-btn{width:100%;justify-content:center;min-height:52px;font-size:17px;color:#fff}
.pz-need-later{background:none;border:0;box-shadow:none;width:100%;min-height:44px;font:inherit;font-weight:600;color:var(--sk-muted,#6b6b7b);cursor:pointer}
/* Put it on your phone (Jeff, 2026-09-30): the QR on a computer, the steps on a phone. */
.phone-card{margin:16px 0}
.phone-card .qs-title{margin-bottom:6px}
/* .stack goes two columns on a wide screen (Home's rows); a card of steps reads top to bottom. */
.card.stack.qs-page{grid-template-columns:1fr}
.qr{width:220px;max-width:100%;margin:6px 0;padding:10px;background:#fff;border-radius:14px;border:1px solid var(--sk-line-soft)}
.qr svg{display:block;width:100%;height:auto}
/* Get Shark on your phone (home.mjs phoneNudge): the QR beside the words, on a computer only */
.ph-nudge:not([hidden]){display:grid;grid-template-columns:150px 1fr;column-gap:22px;align-items:start}
.ph-nudge .qr{grid-column:1;grid-row:1 / span 3;width:150px;margin:0}
.ph-nudge .ph-head{grid-column:2;grid-row:1}
.ph-nudge>p.sub{grid-column:2;grid-row:2;margin-top:4px}
.ph-nudge .btnrow{grid-column:2;grid-row:3}
.ph-nudge .ph-head p{margin:4px 0 0}
/* Get Shark on your phone, iPhone while the app is in beta (quickstart.mjs iphoneBetaCard): two ways picked by tab. */
.ga-head{display:flex;gap:14px;align-items:center;margin-bottom:10px}
.ga-why{margin:0 0 14px}
.ga-head img{border-radius:12px;flex:none;box-shadow:0 0 0 1px var(--sk-line)}
.ga-head .qs-title{font-size:22px;margin:0}
.ga>input[type=radio]{position:absolute;opacity:0;pointer-events:none}
.ga-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:14px;background:var(--sk-line-soft);margin-bottom:14px}
.ga-tabs label{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;border-radius:10px;font-weight:700;font-size:15px;color:var(--sk-muted,#6b6b7b);cursor:pointer}
.ga:has(input[id$=-home]:checked) label[for$=-home],.ga:has(input[id$=-app]:checked) label[for$=-app]{background:var(--sk-card);color:var(--sk-ink);box-shadow:0 1px 3px rgba(17,12,40,.12)}
.ga-beta{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:var(--sk-brand-tint);color:var(--sk-link)}
.ga .ga-app{display:none}
.ga:has(input[id$=-app]:checked) .ga-app{display:block}.ga:has(input[id$=-app]:checked) .ga-home{display:none}
.ga-app>.sub{margin:0 0 12px}
.ga-steps{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:10px}
.ga-step{display:flex;gap:14px;align-items:flex-start;padding:12px 14px;border:1px solid var(--sk-line);border-radius:14px}
.ga-ico{position:relative;flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--sk-brand-tint);color:var(--sk-link)}
.ga-ico b{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;background:var(--sk-brand);color:var(--sk-brand-ink,#fff)}
.ga-words{display:grid;gap:2px;padding-top:1px}.ga-words .sub{margin:0}
.ga-words .btn{margin-top:8px;justify-self:start}
.ga-words .btn.ghost{color:var(--sk-ink)}
/* A "computer" that is really a touch screen (an iPad, a phone on desktop mode) gets the phone's way, not the QR (quickstart.mjs phoneCard). */
.ph-touch{display:none}
@media (hover:none) and (pointer:coarse){.ph-desk{display:none}.ph-touch{display:block}}
.installed-only{display:none}
@media (display-mode: standalone){.phone-card{display:none}.installed-only{display:block}}
/* Inside the store app it already IS the app on their phone (Joe, 2026-10-09: "they wont need to do this though,
   cause its already an app on their phone"): no "Save Shark to your phone" card, menu entry or Account row. */
html.in-app .phone-card,html.in-app a[href="/_app/phone"],html.in-app li:has(> a[href="/_app/phone"]){display:none}
html.in-app .installed-only{display:block}

/* Daily moves (0094): the dark card on Home, and the checklist it opens. */
.today.daily .btn{display:inline-block;margin-top:14px;background:#fff;color:var(--sk-brand-deep);border-color:#fff}
.dbar{height:8px;border-radius:9px;background:rgba(var(--sk-line-rgb),.6);overflow:hidden;margin:10px 0 4px}
.dbar i{display:block;height:100%;border-radius:9px;background:var(--sk-brand);transition:width .3s}
.today .dbar{background:rgba(255,255,255,.22)}
.today .dbar i{background:#fff}
.dprog{display:flex;justify-content:space-between;gap:12px;margin-top:18px;font-size:15px}
.dprog span{color:var(--sk-ink-soft);font-weight:600}
.dlist{padding:4px 16px;margin-top:14px}
.ditem{border-bottom:1px solid var(--sk-line-soft);scroll-margin-top:90px}
.ditem:last-child{border-bottom:0}
.ditem form{margin:0}
.dcheck{display:flex;align-items:flex-start;gap:14px;width:100%;padding:16px 0;background:none;border:0;box-shadow:none;
  color:inherit;text-align:left;font:inherit;cursor:pointer;min-height:0}
.dcheck:hover{background:none}
.dcheck .box{flex:none;width:28px;height:28px;margin-top:1px;border:2px solid var(--sk-line);border-radius:8px;display:grid;place-items:center;background:var(--sk-card,#fff)}
.ditem.on .box{background:var(--sk-check,var(--sk-brand));border-color:var(--sk-check,var(--sk-brand))}
.ditem.on .box::after{content:"";width:8px;height:14px;border:solid #fff;border-width:0 3px 3px 0;transform:translateY(-2px) rotate(45deg)}
.dtext strong{display:block;font-size:17px;line-height:1.3;color:var(--sk-ink)}
.dtext small{display:block;margin-top:3px;font-size:14.5px;line-height:1.45;color:var(--sk-ink-soft)}
.ditem.on .dtext strong{color:var(--sk-ink-soft);text-decoration:line-through;text-decoration-thickness:1.5px}
.dextra{margin:-6px 0 14px 42px}
.dtopic{margin:8px 0 0;font-size:14.5px;line-height:1.5;color:var(--sk-ink-soft)}
.dtopic a{font-weight:600;color:var(--sk-link)}
.dsearch{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:2px}
.dnote{margin:16px 0 0;padding:16px 18px;border-radius:var(--sk-r);background:var(--sk-tint);display:grid;gap:4px}
.dnote strong{font-size:16px}
.dnote span{font-size:15px;color:var(--sk-ink-soft)}

.dquick{display:flex;flex-wrap:wrap;gap:8px}
/* Jeff: "a pale nueva color, too flat plain white": the system's own tint, per system. */
.dquick .btn.ghost{background:var(--sk-brand-tint);border-color:color-mix(in srgb,var(--sk-brand) 35%,transparent);color:var(--sk-link)}
.dquick .btn.ghost:hover{background:color-mix(in srgb,var(--sk-brand) 22%,var(--sk-card))}
.dq{display:inline-flex;align-items:center;width:auto;margin:0;padding:9px 14px;font-size:15px;min-height:44px}
.dmore{margin-top:10px}
.dmore summary{cursor:pointer;font-weight:600;color:var(--sk-link);font-size:15px}
.dmore[open] summary{margin-bottom:8px}
.dmore p,.dsteps li{font-size:15.5px;line-height:1.55;color:var(--sk-ink-soft);margin:8px 0}
.dsteps{padding-left:20px;margin:6px 0}
.dhead{font-weight:700;color:var(--sk-ink)!important;margin-top:16px!important}
.dscript{margin:8px 0;padding:14px;border-radius:12px;background:var(--sk-tint);border:1px solid var(--sk-line-soft)}
.dscript p{color:var(--sk-ink)!important;margin:0 0 10px!important}
.dscript button{width:100%}
/* The ready text on a lead's page (0434, contacts.mjs sayCard): its line breaks kept; a missing value is a link to fill it. */
.ld-say{margin-bottom:14px}
.ld-say .dscript p{overflow-wrap:anywhere}
.ld-say-add{display:inline-block;margin:2px 0;font-weight:700;color:var(--sk-link);text-decoration:underline}
.ld-say .btn[aria-disabled="true"]{background:var(--sk-line);border-color:var(--sk-line);color:var(--sk-ink-faint);box-shadow:none;cursor:not-allowed;pointer-events:none}
.dvar{padding:0 5px;border-radius:5px;background:rgba(var(--sk-brand-rgb),.14);color:var(--sk-link);font-weight:600}
.dvideo{position:relative;width:min(240px,100%);aspect-ratio:196/426;border-radius:12px;overflow:hidden;background:#000}
.dvideo iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.dthread{margin-top:10px;padding:12px 14px;border-radius:12px;border:1px solid var(--sk-line-soft);display:grid;gap:6px}
.dthread span{font-size:13px;color:var(--sk-ink-faint);text-transform:uppercase;letter-spacing:.06em}
.dthread b{font-size:15.5px;line-height:1.4}
.dthread .dq{justify-self:start}

/* My funnels: each funnel's how-it-works and promotion links, from its how-to page (Jeff, 2026-09-30). */
.fres{margin-top:12px;border-top:1px solid var(--sk-line-soft)}
.fres .linkrow{padding:12px 0;grid-template-columns:1fr;gap:8px}
@media (min-width:641px){.fres .linkrow{grid-template-columns:1fr auto;gap:10px}}
.fres .linkrow .nm{font-size:15.5px;line-height:1.35}
.fres .linkrow .btn{justify-self:start;padding:8px 13px;font-size:13.5px;min-height:0;white-space:nowrap;margin:0;width:auto}
.fcard .what{line-height:1.5}

/* My funnels as the GHL rep hub (rep-hub.mjs, Jeff 2026-09-30: "we need to be on point"). */
.hgroup{display:flex;align-items:center;gap:10px;margin:24px 0 10px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--sk-ink-faint)}
.hgroup i{flex:1;height:1px;background:var(--sk-line-soft)}
.hgroup b{font-weight:600;color:var(--sk-ink-soft)}
.hcard{background:var(--sk-card,#fff);border:1px solid var(--sk-line-soft);border-radius:var(--sk-r);margin-bottom:12px;box-shadow:var(--sk-shadow)}
.hcard[open]{border-color:rgba(var(--sk-brand-rgb),.45)}
.hcard summary{display:flex;align-items:center;gap:14px;padding:16px;cursor:pointer;list-style:none}
.hcard summary::-webkit-details-marker{display:none}
.hicon{flex:none;width:48px;height:48px;border-radius:13px;display:grid;place-items:center;color:#fff;background:var(--sk-grad,var(--sk-brand))}
.hicon svg{width:24px;height:24px}
.hname{flex:1;min-width:0}
.hname b{display:block;font-size:17px;line-height:1.25;color:var(--sk-ink)}
.hname small{display:block;margin-top:3px;font-size:14px;line-height:1.35;color:var(--sk-ink-soft)}
.hchev{flex:none;color:var(--sk-link);transition:transform .2s}
.hchev svg{width:22px;height:22px;display:block}
.hcard[open] .hchev{transform:rotate(180deg)}
.hbody{padding:0 16px 18px}
.hdesc{margin:0 0 14px;font-size:15px;line-height:1.5;color:var(--sk-ink-soft)}
.hcopy{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px;border-radius:14px;font-size:15px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.hcopy svg{width:20px;height:20px;flex:none}   /* never squeezed by a long second line (2026-10-06) */
.hurl{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 10px 10px 14px;border:1.5px dashed var(--sk-line);border-radius:12px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:13.5px;color:var(--sk-ink-soft)}
.hurl span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hurl a{flex:none;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--sk-line);border-radius:10px;color:var(--sk-link);background:var(--sk-card,#fff)}
.hurl a svg,.hgo svg{width:18px;height:18px}
.hsub{margin:20px 0 10px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--sk-ink-faint)}
.hact{display:flex;align-items:flex-start;gap:14px;padding:14px;margin-bottom:10px;border:1px solid var(--sk-line-soft);border-radius:14px;color:var(--sk-ink);text-decoration:none;background:var(--sk-card,#fff)}
.hact:hover{border-color:rgba(var(--sk-brand-rgb),.45)}
.hmark{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--sk-tint);color:var(--sk-link)}
.hmark svg{width:19px;height:19px}
.hmark.emoji{background:none;font-size:24px}
.hlabel{flex:1;min-width:0;font-size:16px;font-weight:600;line-height:1.3;padding-top:7px}
.hact.sub .hlabel{padding-top:1px}
.hlabel small{display:block;margin-top:4px;font-size:14px;font-weight:400;line-height:1.45;color:var(--sk-ink-soft)}
.hgo{flex:none;color:var(--sk-ink-faint);padding-top:6px}
.hrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--sk-line-soft);font-size:15.5px}
.hrow:first-child{border-top:0}
.hrow button{flex:none;width:auto;padding:8px 14px;font-size:13.5px;min-height:0;margin:0}

/* The thread on a phone (Jeff, 2026-09-30): the reply box rides ABOVE the fixed tab bar (it sat
   12px from the bottom, under the bar), and while they type the tab bar steps aside so the box
   and the keyboard have the screen. */
.more-mail summary{cursor:pointer;font-weight:600;margin-top:6px}
.bubble.us .more-mail summary{color:#fff}
.more-mail-btn{display:inline-block;margin-top:8px;padding:0;border:0;background:none;box-shadow:none;min-height:0;width:auto;font:inherit;font-size:15px;font-weight:700;text-decoration:underline;cursor:pointer;color:inherit}
.mail-dlg{width:min(680px,calc(100vw - 24px))}
.mail-frame{display:block;width:100%;height:70vh;border:1px solid var(--sk-line);border-radius:10px;background:#fff}
.more-mail[open] summary{margin-bottom:6px}
@media (max-width:899px){
  form.reply{bottom:calc(84px + env(safe-area-inset-bottom));z-index:31}
  body:has(form.reply textarea:focus) .tabs{display:none}
  body:has(form.reply textarea:focus) form.reply{bottom:8px}
}

/* The reply box, compact like a messaging app: the pills small, the box and Send on one line. */
form.reply .reply-row{display:flex;align-items:flex-end;gap:8px}
form.reply .reply-row textarea{flex:1;min-width:0;min-height:52px;max-height:40vh;resize:none}
form.reply .reply-row button{flex:none;width:auto;margin:0;padding:14px 18px}
@media (max-width:899px){
  form.reply{padding:10px 12px;gap:8px}
  form.reply .seg label span{padding:6px 14px;font-size:15px}
}

/* Sign in (Jeff, 2026-09-30): password by default, the link one tap below. */
.login-form{display:grid;gap:12px;margin-top:18px}
.login-form .field{border:0;padding:0}
.showpass{display:flex;align-items:center;gap:10px;min-height:44px;font-size:16px;color:var(--sk-ink-soft);cursor:pointer}
.showpass input{width:22px;height:22px;margin:0;accent-color:var(--sk-brand)}
.login-alt{margin:14px 0 0;text-align:center;font-size:16px}
.login-alt a{color:var(--sk-link);font-weight:600}

/* A section that stays folded until it's wanted (Account > Ad tracking). */
.acc{margin:18px 0;border:1px solid var(--sk-line);border-radius:14px;background:var(--sk-card)}
.acc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary>span{display:flex;flex-direction:column;gap:3px}
.acc>summary strong{font-size:16px;color:var(--sk-ink)}
.acc>summary small{font-size:13.5px;color:var(--sk-ink-soft)}
.acc>summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--sk-ink-soft);border-bottom:2px solid var(--sk-ink-soft);transform:rotate(45deg);margin-right:4px;transition:transform .15s}
.acc[open]>summary::after{transform:rotate(-135deg)}
.acc>summary:focus-visible{outline:2px solid var(--sk-brand);outline-offset:2px;border-radius:14px}
.acc-body{padding:0 18px 18px;border-top:1px solid var(--sk-line-soft)}
.acc-body h3{margin:18px 0 4px;font-size:15px}

/* Social content, one post a day (0100). */
.spost img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--sk-line)}
.spost .dquick{display:flex;flex-wrap:wrap;gap:8px}
.dpost{display:flex;gap:12px;align-items:center;margin-top:10px}
.dpost img{width:84px;height:84px;object-fit:cover;border-radius:10px;border:1px solid var(--sk-line);flex:none}
.dpost>div{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.dpost span{font-weight:600;font-size:15px;color:var(--sk-ink)}

.ditem.off{opacity:.75}
.ditem.off .dcheck{cursor:default}
.dlock{font-size:14.5px;line-height:1.5;color:var(--sk-ink-soft);margin:6px 0 0}
.dlock a{font-weight:600;color:var(--sk-link)}

/* phone-type:start */
/* Generated by scripts-phone-type.mjs: every size a step bigger on a phone. Edit sizes above, then rerun it. */
@media (max-width:640px){
  body{font-size:19.5px}
  .brand .tag{font-size:11.5px}
  .avatar{font-size:16.5px}
  .tabs a{font-size:14px}
  .adminlink a{font-size:14px}
  h2{font-size:15px}
  h3{font-size:20px}
  .sub{font-size:19px}
  .muted{font-size:16.5px}
  .cards .n{font-size:31.5px}
  .cards .k{font-size:14px}
  .row .nm{font-size:18px}
  .row .meta{font-size:16px}
  .row .when{font-size:14.5px}
  .lav{font-size:15px}
  .pill{font-size:14px}
  .btn,button{font-size:17.5px}
  input:not([type]),input[type=text],input[type=email],input[type=search],input[type=tel],input[type=password],input[type=number],input[type=url]{font-size:19.5px}
  .field span{font-size:14px}
  .empty{font-size:19px}
  dl.kv dt{font-size:14px}
  dl.kv dd{font-size:19px}
  .timeline .when{font-size:14px}
  .timeline strong{font-size:19px}
  .timeline p{font-size:18px}
  .timeline dl.answers dt{font-size:16px}
  .timeline dl.answers dd{font-size:18px}
  .opp-why{font-size:19px}
  .opp-angle{font-size:19px}
  .opp-acts .btn,.opp-acts button{font-size:16px}
  .linkrow .nm{font-size:18.5px}
  .linkrow .u{font-size:15px}
  .linkrow button{font-size:14.5px}
  th,td{font-size:17.5px}
  th{font-size:14px}
  .login h1{font-size:28px}
  .note{font-size:17.5px}
  li{font-size:19px}
  .platforms .btn{font-size:14.5px}
  .opp-note{font-size:14px}
  .bubble{font-size:19.5px}
  .bubble strong{font-size:18px}
  .bubble .when{font-size:14px}
  form.reply textarea{font-size:19.5px}
  .seg span{font-size:16.5px}
  .notice{font-size:18.5px}
  .progress span{font-size:14px}
  .stack .field small{font-size:16.5px}
  .tier h3,.offer h3{font-size:20.5px}
  .tier p,.offer p{font-size:19px}
  .picks .btn small{font-size:14.5px}
  .offer .added{font-size:19px}
  .skip a{font-size:18px}
  textarea{font-size:19.5px}
  .field small{font-size:16.5px}
  .field.choice .plain{font-size:18.5px}
  .mono{font-size:16.5px}
  .plainlist li{font-size:18px}
  .nico{font-size:19px}
  .lbl{font-size:14px}
  .greet p{font-size:18px}
  .stat b{font-size:25.5px}
  .stat span{font-size:14px}
  .today h3{font-size:21px}
  .today .src{font-size:16.5px}
  .today .why{font-size:17.5px}
  .mrow .t b{font-size:18px}
  .mrow .t span{font-size:15px}
  .mrow .count{font-size:14.5px}
  .fcard .top b{font-size:19px}
  .fcard .what{font-size:16px}
  .fcard .url{font-size:15px}
  .fcard .acts > *{font-size:16.5px}
  .fcard details.more summary{font-size:16px}
  .fcard details.more .linkrow .u{font-size:15px}
  .crumbs{font-size:16.5px}
  .card.rowlink .muted,.steprow .muted{font-size:16.5px}
  button.small{font-size:17px}
  label.choice{font-size:18.5px}
  select{font-size:19px}
  textarea{font-size:18.5px}
  #raw{font-size:15px}
  .waitrow input[type=number]{font-size:18.5px}
  .waitrow select{font-size:18px}
  .wallet-bal{font-size:31px}
  .branch summary{font-size:17px}
  .dnsrec code{font-size:16px}
  .btn.sm{font-size:16px}
  .viewas{font-size:16px}
  .qs-title{font-size:26.5px}
  .helpline{font-size:16px}
  .linkish{font-size:16px}
  .dprog{font-size:17px}
  .dtext strong{font-size:19px}
  .dtext small{font-size:16.5px}
  .dtopic{font-size:16.5px}
  .dnote strong{font-size:18px}
  .dnote span{font-size:17px}
  .dq{font-size:17px}
  .dmore summary{font-size:17px}
  .dmore p,.dsteps li{font-size:17.5px}
  .dthread span{font-size:15px}
  .dthread b{font-size:17.5px}
  .fres .linkrow .nm{font-size:17.5px}
  .fres .linkrow .btn{font-size:15.5px}
  .hgroup{font-size:14px}
  .hname b{font-size:19px}
  .hname small{font-size:16px}
  .hdesc{font-size:17px}
  .hcopy{font-size:17px}
  .hurl{font-size:15.5px}
  .hsub{font-size:14px}
  .hmark.emoji{font-size:26.5px}
  .hlabel{font-size:18px}
  .hlabel small{font-size:16px}
  .hrow{font-size:17.5px}
  .hrow button{font-size:15.5px}
  .showpass{font-size:18px}
  .login-alt{font-size:18px}
  .acc>summary strong{font-size:18px}
  .acc>summary small{font-size:15.5px}
  .acc-body h3{font-size:17px}
  .dpost span{font-size:17px}
  .dlock{font-size:16.5px}
}
/* phone-type:end */

/* Texting sign-up (0107): the business questions only for "A business with an EIN", the
   "Your business name" box only for "Just me". */
.a2p-form .a2p-biz{display:none}
.a2p-form:has(input[name=kind][value=business]:checked) .a2p-biz{display:grid}
.a2p-form:has(input[name=kind][value=business]:checked) .a2p-sole{display:none}
/* On a wide screen .stack is two columns: the choice and the business questions each take the
   full width (the questions as their own two columns), and fields sit at the top of their row so
   a help line under one box does not stretch the box beside it (Jeff, 2026-10-01). */
.a2p-form,.a2p-form .a2p-biz{align-items:start}
.a2p-form > .field:first-child,.a2p-form > .a2p-biz{grid-column:1/-1}
.a2p-form > .a2p-biz{margin-top:0}
.a2p-form select{width:100%;padding:12px 14px;border:1px solid var(--sk-line);border-radius:var(--sk-r-sm);background:var(--sk-card);color:var(--sk-ink);font:inherit;font-size:17.5px;min-height:calc(1.5em + 26px)}  /* the text boxes' size (a dropdown ignores line-height), so a row's boxes match */
@media (max-width:640px){.a2p-form select{font-size:19.5px}}

/* Admin: the social posts calendar (0109). Seven columns that fit a phone. */
.pcal-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:14px 0 8px}
.pcal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;container-type:inline-size;height:auto}
.pcal-w{font-size:12px;text-align:center;color:var(--sk-ink-faint);padding-bottom:2px}
.pcal-day{position:relative;height:calc((100cqw - 24px) / 7);border-radius:8px;border:1px solid var(--sk-line);background:var(--sk-card);overflow:hidden;display:block}
.pcal-day.pad{border:0;background:none}
.pcal-day span{position:absolute;top:2px;left:4px;font-size:11px;font-weight:600;z-index:1;color:var(--sk-ink);text-shadow:0 0 3px #fff,0 0 3px #fff}
.pcal>*{margin:0!important}
.pcal-day img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pcal-day.past img{opacity:.55}
.pcal-day.today{outline:2px solid var(--sk-brand);outline-offset:1px}
.pcal-day.gap,.pcal-swatch.gap{background:repeating-linear-gradient(45deg,#fde8e8,#fde8e8 4px,#fff 4px,#fff 8px);border-color:#f3b4b4}
.pcal-swatch{display:inline-block;width:14px;height:14px;border-radius:4px;border:1px solid;vertical-align:-2px;margin-right:4px}
.pcal-key{margin-top:8px}
.pcal-sent{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px}
.pcal-sent figure{margin:0}
.pcal-sent img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;border:1px solid var(--sk-line);display:block}
.pcal-sent figcaption{font-size:11px;text-align:center;margin-top:2px}

/* ---- accessibility pass (2026-10-01): WCAG AA for a 40-60 audience on phones ---- */
/* A visible ring on everything that can be tapped or focused, in the colour that passes on
   every system's palette (brand-deep). The browser default was the only ring before. */
.btn:focus-visible,button:focus-visible,a.row:focus-visible,.row:focus-visible,.mrow:focus-visible,.tabs a:focus-visible,
summary:focus-visible,.pcal-day:focus-visible,.iconbtn:focus-visible,.avatar:focus-visible,select:focus-visible,
.rowlink:focus-visible,.linkrow a:focus-visible{outline:3px solid var(--sk-brand-deep);outline-offset:2px}
/* Secondary buttons and chips reach the 44px tap minimum without changing their look. */
.linkrow button,.hrow button,.btn.sm,button.small,.fres .linkrow .btn,.fcard .acts>*,.opp-acts .btn,.opp-acts button,
.hurl a{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.seg span{min-height:44px;display:inline-flex;align-items:center}
/* A text field's edge at 3:1 against the card, so the field reads as a field. */
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{border-color:#8A84A0}
input[type=checkbox],input[type=radio]{width:22px;height:22px;accent-color:var(--sk-brand-deep)}
.stat.up b::after{content:" \2191";font-size:.7em}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Reminders on your phone (0116, src/app/push.mjs): what they get, then one big button. */
.rem-card{margin:16px 0}
.rem-what{margin:14px 0}
.rem-list{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.rem-list li strong{display:block}
.rem-list li .sub{display:block;margin:2px 0 0}
/* Each line with its own on/off switch (0450) */
.rem-pick{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.rem-pick > span:first-child{min-width:0}
.rem-always{flex:none;font-size:14px;font-weight:600;color:var(--sk-ink-soft)}
.rem-states{margin:14px 0}
.rem-state[hidden]{display:none}
.rem-go{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin:12px 0 0;font-size:17px}
.rem-acts{display:grid;gap:10px}
.rem-acts form{margin:0}
.rem-ok{color:var(--sk-ok);margin:0}
.rem-msg{margin:12px 0 0;font-size:16px;color:var(--sk-ink-soft)}
.rem-msg:empty{display:none}

/* Admin: Pages on Google (src/admin/seo.mjs). The address and its status on one line; the
   title and description under it, wrapped (a description is a long sentence). */
.seo-list .rowlink{display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
.seo-top .pill{white-space:normal}
.seo-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.seo-top .mono{overflow-wrap:anywhere}

/* Home: the action line on a warning card ("Turn on texting"), so the fix reads as a tap. */
.heldbar .go{color:var(--sk-link);font-weight:600;margin-top:4px}

/* A screen title with its one action beside it (My Leads: Buy leads). Wraps under on a phone. */
.titlerow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.titlerow h1{margin-bottom:0}

/* --------------------------------------------------------------- Send your video (0120, send.mjs) */
.snd-pick{display:block;width:100%;margin:0 0 12px}
.snd-acts{display:grid;gap:10px;margin:14px 0}
.snd-acts .btn,.snd-acts button{width:100%;text-align:center}
.snd-link{overflow-wrap:anywhere}
/* How it's going (0134): the mobile only shows for text and WhatsApp, and is "(optional)" for WhatsApp.
   :has() keeps it free of script; without it, the field just stays. */
.snd-via{border:0;padding:0;margin:0 0 14px}
.snd-via legend{padding:0;margin:0 0 8px;font-weight:600}
.snd-via-opts{flex-wrap:wrap;gap:8px}
#snd-form:has(input[name=via]:is([value=messenger],[value=instagram],[value=linkedin],[value=other]):checked) #snd-phone-f{display:none}
#snd-form:has(input[name=via][value=text]:checked) .snd-opt{display:none}
/* Picking from contacts sits by the number when sending by text (Joe, 2026-10-09), so the one at the top steps aside. */
.snd-pick-here{display:none;width:100%;margin:-4px 0 14px}
#snd-form:has(input[name=via][value=text]:checked) .snd-pick-here:not([hidden]){display:block}
body:has(#snd-form input[name=via][value=text]:checked) button.snd-pick{display:none}
.snd-paste{margin:-4px 0 12px;font-size:14px}
.wlink-send{display:block;text-align:center}
.watch-acts{display:grid;gap:10px;margin:10px 0 4px}

/* A funnel's steps (admin): one column, top to bottom in funnel order, never two side by side. On a
   wide screen each step is one long pill row: name and where it goes on the left, buttons on the
   right (Jeff, 2026-10-01: "stack, ... each line like hot dog shape across the screen"). */
.stack.fsteps{grid-template-columns:minmax(0,1fr);gap:10px}
.fsteps .card + .card{margin-top:0}
@media (min-width:720px){
  .fsteps .steprow{flex-wrap:nowrap;border-radius:999px;padding:14px 16px 14px 28px}
  .fsteps .steprow > .stepmain{flex:1 1 auto}
  .fsteps .stepbtns .btn,.fsteps .stepbtns button{border-radius:999px}
}

/* The hub on a personal-link system (0127, Quantaira): three big cards that read as the three things
   to do. The first is filled with the system's colour, darkened so white text holds 4.5:1 on all of
   it; the other two carry the colour in their edge. One column on a phone, three across on a computer. */
.hub3{display:grid;gap:10px;margin-top:16px}
.card.hubcard{display:grid;gap:6px;padding:18px 18px 16px;text-decoration:none;color:var(--sk-ink);margin:0;
  border:1px solid color-mix(in srgb,var(--sk-brand) 45%,var(--sk-line));background:var(--sk-brand-tint)}
.hubcard strong{font-size:19px;line-height:1.25}
.hubcard .sub{margin:0;font-size:15px;line-height:1.45;max-width:none}
.hubcard .go{color:var(--sk-brand);font-weight:600;font-size:15px;margin-top:2px}
.hub3 > .hubcard:first-child{border-color:transparent;color:#fff;
  background:linear-gradient(135deg,color-mix(in srgb,var(--sk-brand) 70%,#000),color-mix(in srgb,var(--sk-brand-deep) 75%,#000))}
.hub3 > .hubcard:first-child .sub{color:rgba(255,255,255,.92)}
.hub3 > .hubcard:first-child .go{color:#fff}
/* Each card wears its icon on the left (Jeff, 2026-10-15: "can we put icons to the left of the text in these buttons?"):
   a tinted tile in the system's colour, white on the filled first card; the words keep the second column. */
.card.hubcard:has(> .hubico){grid-template-columns:44px 1fr;column-gap:14px;align-items:start}
.hubcard > .hubico{grid-column:1;grid-row:1 / span 3;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  color:var(--sk-brand);background:color-mix(in srgb,var(--sk-brand) 18%,transparent)}
.hubcard > .hubico svg{width:24px;height:24px}
.hubcard:has(> .hubico) > :not(.hubico){grid-column:2}
.hub3 > .hubcard:first-child > .hubico{color:#fff;background:rgba(255,255,255,.2)}
/* Activity and lead rows say a sentence: let it wrap rather than end in "...". */
.feed .row .meta,.ppl .row .meta{white-space:normal}
.feed + .sub{margin-top:12px}
/* The hub's sections sit closer than the app's usual 52px above a heading. */
.hub3 + h2,.feed + .sub + h2,.hub3 ~ .empty + h2{margin-top:22px}
.hubref .url{font-weight:600;color:var(--sk-brand);overflow-wrap:anywhere}
.card.stack.hubref{grid-template-columns:minmax(0,1fr)}
.hubref p{margin:0}
.hubref-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.hubref-acts > *{margin:0;width:auto;flex:0 1 auto;text-align:center;white-space:nowrap}
/* A row's status pill sits beside the name, so the line under it keeps the whole width. */
.rtop{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rtop .nm{min-width:0}
.rtop .pill{flex:none}
.stats.s4{grid-template-columns:repeat(2,1fr)}
.stats.s4 + .rows{margin-top:16px}
.pill.go-on{background:var(--sk-brand-tint);color:var(--sk-brand);border-color:color-mix(in srgb,var(--sk-brand) 40%,transparent)}
@media (min-width:720px){
  .hub3{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
  .stats.s4{grid-template-columns:repeat(4,1fr)}
}
.nowrap{white-space:nowrap}
/* My links on a personal-link system (0127): two cards, each a link to share. */
.wlinks{display:grid;gap:12px;margin-top:18px}
.card.wlink{grid-template-columns:minmax(0,1fr);gap:8px;margin:0}
.wlink strong{font-size:18px}
.wlink .sub{margin:0;max-width:none;font-size:15px;overflow-wrap:anywhere}
.wlink .url{font-weight:600;color:var(--sk-brand);overflow-wrap:anywhere}
@media (min-width:720px){.wlinks{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}

/* LINKS, ONE LOOK (Jeff, 2026-10-01: "the breadcrumbs and links... how do we make those look
   better?"). The way back is a small pill above the heading, not a browser-blue underlined line
   glued to it; a link inside a sentence is the system's colour with a soft underline, the same on
   every screen ("Chat with support" was bold purple, the rest browser blue). */
.back{position:relative;display:inline-flex;align-items:center;gap:6px;margin:0 0 16px;padding:8px 16px 8px 12px;min-height:36px;border-radius:999px;
  background:var(--sk-brand-tint);border:1px solid var(--sk-line-soft);color:var(--sk-ink-soft);
  font-size:14.5px;font-weight:600;line-height:1.3;text-decoration:none;max-width:100%}
.back::before{content:"";width:7px;height:7px;flex:none;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-left:3px}
.back::after{content:"";position:absolute;inset:-6px -4px}   /* a 48px-tall place to tap */
.back:hover{color:var(--sk-brand);border-color:color-mix(in srgb,var(--sk-brand) 40%,transparent)}
.back:focus-visible{outline:2px solid var(--sk-brand);outline-offset:2px}
.back + h1{margin-top:0}
main p a:not([class]),main dd a:not([class]){color:var(--sk-brand);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--sk-brand) 40%,transparent)}
main p a:not([class]):hover,main dd a:not([class]):hover{text-decoration-color:currentColor}

/* The quick start video's place, until the video is pasted (Quantaira, 2026-10-01). */
.qs-soon{display:grid;place-content:center;justify-items:center;gap:12px;aspect-ratio:16/9;border-radius:var(--sk-r);
  background:linear-gradient(135deg,color-mix(in srgb,var(--sk-brand) 22%,var(--sk-card)),color-mix(in srgb,var(--sk-brand-deep) 22%,var(--sk-card)));
  border:1px solid var(--sk-line);color:var(--sk-ink);font-size:16px;font-weight:600;text-align:center;padding:16px;margin:14px 0 12px}
.qs-play{width:56px;height:56px;border-radius:50%;background:var(--sk-brand);position:relative;box-shadow:0 8px 24px -10px var(--sk-brand)}
.qs-play::after{content:"";position:absolute;left:22px;top:17px;border-left:16px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent}
.qs-steps li > a{color:var(--sk-brand)}
/* A button inside a step (the phone card's Get TestFlight, Join the beta; 2026-10-24): the step-link colour above would
   paint its words the button's own colour. */
.qs-steps li > a.btn{margin-top:6px;color:var(--sk-brand-ink,#fff)}
.qs-steps li > a.btn.ghost{color:var(--sk-ink)}

/* Conversations to join: the reply checker (src/app/join.mjs). */
.rchk{margin-top:12px}
.rchk button{justify-self:start}
.rchk-out{margin-top:12px}
.rchk-verdict{margin:0;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline}
.rchk-verdict b{font-size:19px}
.rchk-verdict span{color:var(--sk-ink-soft)}
.rchk-post .rchk-verdict b{color:var(--sk-ok)}
.rchk-tweak .rchk-verdict b{color:var(--sk-warn)}
.rchk-rewrite .rchk-verdict b{color:var(--sk-bad)}
.rchk-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px}
.rchk-list li{display:grid;gap:6px;justify-items:start}
.rchk-list li.rchk-high .pill{color:var(--sk-bad);background:var(--sk-bad-bg);border-color:transparent}
.rchk-list li.rchk-med .pill{color:var(--sk-warn);background:var(--sk-warn-bg);border-color:transparent}
.rchk-list q{color:var(--sk-ink-soft);overflow-wrap:anywhere}
.rchk-list p{margin:4px 0 0;font-size:15.5px;line-height:1.5;color:var(--sk-ink-soft)}
/* Support (0136): the ask box and the rep's own questions with their answers. */
.sup-ask textarea{min-height:130px}
.sup-q .sup-asked{font-weight:600;white-space:pre-wrap;margin:0}
.sup-q .sup-status{margin:10px 0 0;color:var(--sk-ink-soft)}
.sup-q .sup-answer{margin-top:12px;padding-top:12px;border-top:1px solid var(--sk-line);line-height:1.5}

/* ============================== SOCIAL TAB (src/app/social.mjs, 2026-10-03)
   Jeff: "check the spacing", and the stacked "Open Facebook / Instagram" buttons "look clunky".
   Scoped to .soc so Home, the checklist and the conversations page keep their own layout. */
.soc > h2:first-of-type{margin-top:14px}
.soc > h2 + .sub{margin:0 0 12px}
.soc-post{gap:12px}
.soc-post .dscript{margin:0}
.soc-save{display:block;width:100%;text-align:center}
.today /* Today's post as steps, and the short lines between sections (Joe, 2026-10-06) */
.soc-more{margin:12px 0 6px;font-size:14px;line-height:1.5;color:var(--sk-ink-soft)}
.soc-other{margin:10px 0 0;text-align:center;font-size:15px}
/* Daily moves: how to tick an item off, with a ticked box to show it (Joe, 2026-10-06) */
.dhow{display:flex;align-items:center;gap:10px;margin:4px 0 12px;font-size:14.5px;line-height:1.45;color:var(--sk-ink)}
.dhow .dhow-ok{font:inherit;font-weight:700;color:var(--sk-link);text-decoration:underline;background:none;border:0;padding:0;cursor:pointer}
.dhow-box{flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border:2px solid var(--sk-brand);border-radius:6px;background:var(--sk-brand);color:#fff}
/* The rep's own link under a funnel's post (0176) */
.soc-link{display:grid;gap:6px;padding:12px 14px;border-radius:12px;background:var(--sk-card);border:1px solid var(--sk-line)}
.soc-url{font-size:14px;font-weight:600;color:var(--sk-ink);overflow-wrap:anywhere}
/* Search social today: three equal columns, the mark above a smaller name, so "Instagram" fits. */
.soc .platforms{grid-template-columns:repeat(3,minmax(0,1fr))}
.soc .platforms .btn{display:grid;justify-items:center;gap:5px;padding:11px 4px;font-size:13px}
.soc .platforms .btn span{display:block;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* A thread's three buttons: Open the thread across, I replied and Not for me side by side. */
.soc .opp-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.soc .opp-acts .btn{grid-column:1/-1;text-align:center}
/* A card right under a list never touches it (Home: the Social card sat flush under Follow up today,
   Jeff 2026-10-03: "the spacing on home too"). 18px, the gap between Home's other blocks. */
.rows + .card{margin-top:18px}
/* ...nor a card right under another of Home's cards (Jeff, 2026-10-03, "the spacing between the cards"): the
   Daily moves card sat flush on the Social card for a rep with nobody to follow up, and on the upgrade card for LITE. */
.today.daily + .card, .heldbar + .card, .card.offer + .card{margin-top:18px}
/* Home's Daily moves card names the next move (Jeff, 2026-10-03: "your next move" then the item). */
.today .dnext-l{margin:8px 0 2px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.today .dnext-s{margin:4px 0 12px;font-size:15px;line-height:1.4;color:rgba(255,255,255,.86)}

/* Home (Jeff, 2026-10-05): four boxes, two by two, then today's action items. */
.hm-boxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}
.hm-box{display:grid;gap:10px;align-content:start;padding:16px;min-height:112px;border:1px solid var(--sk-line);
  border-radius:var(--sk-r);background:var(--sk-card);box-shadow:var(--sk-shadow);color:var(--sk-ink);text-decoration:none;
  transition:border-color .15s,transform .15s;animation:var(--sk-rise,sk-rise) .5s cubic-bezier(.2,.7,.3,1) both}
.hm-box:hover,.hm-box:focus-visible{border-color:var(--sk-brand);transform:translateY(-1px)}
.hm-box strong{font-size:17px;line-height:1.25}
.hm-box[data-hot]{background:var(--sk-grad);border-color:transparent;color:#fff}
.hm-box[data-hot] .hm-ic{background:#eef0f3;color:var(--sk-brand)}
.hm-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--sk-grad);color:#fff}
.hm-ic svg{width:22px;height:22px}

.hm-out{margin-top:12px}
.hm-h3{margin:24px 0 10px;font-size:19px;line-height:1.25}

/* Home, Joe's layout (2026-10-05): the greeting in two sizes, today's action items as white cards that open
   in place (each a <details>), then the additional items as rows. The house palette and faces, his order. */
.greet .hm-q{margin:6px 0 0;font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 100,"wght" 700;font-size:clamp(20px,5.4vw,24px);line-height:1.2;color:var(--sk-ink)}
.hm-intro{margin:-4px 0 14px;font-size:15px;line-height:1.55;color:var(--sk-ink-soft)}
.hm-acts{display:grid;gap:12px}
.hm-act{border:1.5px solid rgba(var(--sk-brand-rgb),.55);border-radius:var(--sk-r);background:var(--sk-card);box-shadow:var(--sk-shadow);color:var(--sk-ink);text-decoration:none}
.hm-act > summary,.hm-buy{list-style:none;display:flex;align-items:center;gap:13px;padding:15px 16px;min-height:72px;cursor:pointer;font-weight:700;font-size:16.5px;line-height:1.25}
.hm-act > summary::-webkit-details-marker{display:none}
.hm-aic,.hm-ric{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--sk-brand-tint);color:var(--sk-link)}
.hm-aic svg,.hm-ric svg{width:21px;height:21px}
.hm-at{flex:1;min-width:0}
/* The caret: down while closed, up while open (Joe's). */
.hm-car{flex:none;width:10px;height:10px;margin-right:4px;border:solid var(--sk-chev);border-width:0 2.2px 2.2px 0;transform:translateY(-3px) rotate(45deg)}
.hm-act[open] .hm-car{transform:translateY(2px) rotate(-135deg)}
.hm-act[open] > summary{border-bottom:1px solid var(--sk-line-soft)}
.hm-ab{padding:14px 16px 16px;font-size:15.5px;line-height:1.55;color:var(--sk-ink-soft)}
.hm-ab p{margin:0 0 12px}
.hm-ab h3{margin:2px 0 12px;font-size:17px;color:var(--sk-ink)}
.hm-ab strong{color:var(--sk-ink)}
.hm-ab a:not(.btn):not(.hm-step){color:var(--sk-link)}
.hm-steps{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 14px}
.hm-step{display:grid;justify-items:center;gap:6px;padding:16px 8px;border:1.5px solid var(--sk-line);border-radius:var(--sk-r-sm);background:var(--sk-paper);color:var(--sk-link);text-decoration:none;text-align:center}
.hm-step:hover,.hm-step:focus-visible{border-color:var(--sk-brand)}
.hm-step svg{width:30px;height:30px}
.hm-step strong{font-size:16px;color:var(--sk-ink)}
.hm-stepn{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sk-ink-faint)}
/* Step 1 / Step 2 read as buttons: a slow pulse, one after the other (Joe, 2026-10-06: "pulse highlight so it shows to click") */
.hm-tap{margin:2px 0 8px}
@keyframes hm-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--sk-brand) 0%,transparent);border-color:var(--sk-line)}50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--sk-brand) 22%,transparent);border-color:var(--sk-brand)}}
.hm-pulse .hm-step{animation:hm-pulse 2.4s ease-in-out infinite}
.hm-pulse .hm-step + .hm-step{animation-delay:1.2s}
@media (prefers-reduced-motion:reduce){.hm-pulse .hm-step{animation:none;border-color:var(--sk-brand)}}
/* Why Text and Call are greyed out on a lead with no number (Joe's video, 2026-10-06) */
.ld-qhint{margin:-2px 0 10px;font-size:13px;line-height:1.45;color:var(--sk-ink-faint)}
.hm-vp{font-weight:600;color:var(--sk-ink)}
.hm-video{position:relative;aspect-ratio:16/9;border-radius:var(--sk-r-sm);overflow:hidden;background:var(--sk-ink);margin:0 0 14px}
.hm-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.hm-soon{display:grid;place-items:center;align-content:center;gap:10px;color:rgba(255,255,255,.82);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.hm-play{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#fff;color:var(--sk-brand-deep)}
.hm-play svg{width:22px;height:22px;margin-left:3px;fill:currentColor}
.hm-cta{display:block;width:100%;text-align:center;margin:4px 0 0}
.hm-buy b,.hm-row b{margin-left:auto;font-size:24px;line-height:1;color:var(--sk-chev)}
.hm-more{display:grid;gap:10px}
.hm-row{display:flex;align-items:center;gap:13px;padding:14px 16px;border:1px solid var(--sk-line);border-radius:var(--sk-r);background:var(--sk-card);box-shadow:var(--sk-shadow);color:var(--sk-ink);text-decoration:none;font-weight:700;font-size:16px}
.hm-row:hover,.hm-act:hover{border-color:var(--sk-brand)}

/* Send a message / Send a link (2026-10-05, Joe's prototype): three numbered steps, a ruled line between. */
.sm-form{margin-top:8px}
.sm-step{display:flex;gap:14px;padding:20px 0;border-top:1px solid var(--sk-line)}
.sm-n{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--sk-grad);color:#fff;font-weight:800}
.sm-main{flex:1;min-width:0}
h2.sm-h{position:static;display:block;margin:5px 0 14px;padding:0;background:none;font-variation-settings:"wdth" 100,"wght" 700;font-size:18px;letter-spacing:0;text-transform:none;color:var(--sk-ink)}
h2.sm-h::after{content:none}
.sm-names{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sm-names .field{margin:0;padding:0;border:0}
@media (max-width:360px){.sm-names{grid-template-columns:1fr}}
.sm-opt{display:flex;align-items:center;gap:11px;padding:14px;margin:0 0 10px;border:1.5px solid var(--sk-line);border-radius:var(--sk-r-sm);background:var(--sk-card);font-weight:700;cursor:pointer}
.sm-opt:has(input:checked){border-color:var(--sk-brand);background:var(--sk-brand-tint)}
.sm-opt input{accent-color:var(--sk-brand);width:18px;height:18px;margin:0}
#msg-send,#lnk-send{width:100%}
#snd-pick.small{margin-top:10px}
#snd-pick[hidden]{display:none}
.sm-note{margin:4px 2px 0;font-size:13.5px;font-style:italic;color:var(--sk-ink-faint)}
#snd-pickrow{margin:0 0 12px}
#snd-pickrow[hidden]{display:none}
#snd-pickrow .sm-note{margin-top:8px}
/* Message (send.mjs, Jeff 2026-10-10): step 2 switches between A message and A link */
.sm-what{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;margin:0 0 14px;border-radius:999px;background:var(--sk-line-soft,rgba(0,0,0,.05))}
.sm-what label{position:relative;cursor:pointer}
.sm-what input{position:absolute;opacity:0;pointer-events:none}
.sm-what span{display:flex;align-items:center;justify-content:center;gap:7px;padding:10px 8px;border-radius:999px;font-weight:800;font-size:15px;color:var(--sk-ink-soft);transition:background .15s,color .15s}
.sm-what svg{width:18px;height:18px}
.sm-what input:checked + span{background:var(--sk-grad);color:#fff;box-shadow:var(--sk-shadow)}
.sm-what input:focus-visible + span{outline:2px solid var(--sk-brand);outline-offset:2px}
.sm-panel{border:0;margin:0;padding:0;min-width:0}
.sm-panel[hidden]{display:none}
/* Pick a contact from your leads, or from your phone (send.mjs stepsWho, Jeff 2026-10-10) */
.sm-picks{display:grid;gap:8px;margin:0 0 4px}
.sm-picks button{width:100%;justify-content:center}
.sm-picks #snd-pickrow{margin:0}
.sm-picks + .sm-note{margin:0 2px 12px}
.sm-other{margin:-4px 2px 10px}
.snd-leads #snd-lq{width:100%;margin:0 0 12px}
.snd-leads .rows{max-height:52vh;overflow-y:auto}
.snd-leads .row[hidden]{display:none}
.snd-where{gap:8px}
.snd-where .btn,.snd-where button{width:100%;justify-content:center}
.sm-opt .sm-view{flex:none;margin-left:auto;padding:8px 11px;border:0;border-radius:9px;background:var(--sk-brand-tint);color:var(--sk-link);font-size:12.5px;font-weight:800;white-space:nowrap;text-decoration:none;min-height:0}
/* A translated label runs longer ("Dieses Skript ansehen"): it wraps inside the row instead of pushing it off the screen. */
.sm-opt .sm-view{flex:0 1 auto;max-width:50%;white-space:normal;text-align:center}
.sm-dlg{width:min(520px,calc(100vw - 32px));max-height:80vh;border:0;border-radius:var(--sk-r);padding:24px 22px;box-shadow:var(--sk-shadow-lift);color:var(--sk-ink);overflow-y:auto}
.sm-dlg::backdrop{background:rgba(var(--sk-shadow-rgb),.55)}
.sm-dlg h3{margin:6px 0 12px;font-size:21px}
.sm-dlg p{margin:0 0 12px;font-size:16px;line-height:1.55;color:var(--sk-ink-soft)}
.sm-x{min-height:0;padding:4px 10px;border:0;background:none;color:var(--sk-ink-faint);font-size:28px;line-height:1}

/* My Leads (2026-10-05, Joe's prototype): two quick filters, then one list card, a row per lead with View. */
.ml-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 16px}
.ml-fl{width:100%;font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--sk-ink-faint)}
.ml-chip{padding:9px 13px;border:1.5px solid var(--sk-line);border-radius:999px;background:var(--sk-card);color:var(--sk-link);font-size:13px;font-weight:700;text-decoration:none}
.ml-chip.on{border-color:var(--sk-brand);background:var(--sk-brand-tint)}

.ml-list{border:1.5px solid var(--sk-line);border-radius:var(--sk-r);background:var(--sk-card);overflow:hidden}
.ml-key{margin:10px 2px 0;font-size:13px;color:var(--sk-mute)}
.ml-row{display:flex;align-items:center;gap:12px;padding:14px;border-bottom:1px solid var(--sk-line-soft);color:var(--sk-ink);text-decoration:none}
.ml-row:last-child{border-bottom:0}
.ml-who{display:grid;gap:3px;min-width:0}
.ml-who strong{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ml-who span{font-size:13px;color:var(--sk-ink-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ml-end{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
.ml-end time{font-size:12px;color:var(--sk-ink-faint);white-space:nowrap}
.ml-view{padding:7px 12px;border-radius:9px;background:var(--sk-grad);color:#fff;font-size:12.5px;font-weight:800}
@media (max-width:380px){.ml-end time{display:none}}
/* How a lead came in (2026-10-06): a small pill on the My Leads row and under the lead record's name */
.ld-kind{justify-self:start;font-size:10.5px;padding:2px 7px;letter-spacing:.08em;background:var(--sk-line-soft);color:var(--sk-ink-soft)}
.ld-kind.fn{background:var(--sk-brand-tint);color:var(--sk-link)}
.ml-who .ld-kind{font-size:10.5px;color:var(--sk-ink-soft);overflow:visible}
.ml-who .ld-kind.fn{color:var(--sk-link)}
h1 + .ld-kind{margin:-4px 0 14px}
/* Why an in-app lead has no email or phone, and the button to add them */
.ld-why{margin:2px 0 6px;font-size:13.5px;line-height:1.5;color:var(--sk-ink-faint)}
.ld-warn{margin:0 0 12px;padding:10px 12px;border-radius:10px;background:var(--sk-warn-bg);color:var(--sk-warn);font-size:14px;line-height:1.5}
.ld-add{display:inline;margin-left:4px;padding:0;border:0;background:none;color:var(--sk-link);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}

/* The lead record (2026-10-05, Joe's prototype): four quick actions, the follow-up button, the record,
   Message History, Link History. */
.ld-qas{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:4px 0 14px}
.ld-qa{display:grid;justify-items:center;gap:6px;padding:12px 4px 10px;border:1.5px solid var(--sk-line);border-radius:14px;background:var(--sk-card);color:var(--sk-ink);text-decoration:none;font-size:12.5px;font-weight:800}
.ld-qa svg{width:22px;height:22px;color:var(--sk-link)}
.ld-qa.off{opacity:.4}
.btn.ld-fu,button.ld-fu{display:block;width:100%;margin:0 0 18px}
.ld-rec{padding:4px 17px;margin-bottom:6px;border:1.5px solid var(--sk-line);border-radius:18px;background:var(--sk-card)}
.ld-line{display:grid;gap:4px;padding:13px 0;border-bottom:1px solid var(--sk-line-soft)}
.ld-line:last-child{border-bottom:0}
.ld-line span{font-size:13px;color:var(--sk-ink-faint)}
.ld-line strong{font-size:15px;color:var(--sk-ink);overflow-wrap:anywhere}
.ld-val{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.ld-pen{flex:none;display:inline-grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid var(--sk-line);border-radius:10px;background:var(--sk-card);color:var(--sk-link);box-shadow:none;cursor:pointer}
.ld-pen svg{width:17px;height:17px}
.ld-ans{display:grid;gap:2px;margin:8px 0 0;padding-top:8px;border-top:1px solid var(--sk-line-soft);font-size:13px}
.ld-ans dt{color:var(--sk-ink-faint)}
.ld-ans dd{margin:0 0 6px;color:var(--sk-ink);font-weight:700}
.ld-h{margin:26px 0 4px;font-size:19px}
.ld-hs{margin:0 0 12px;font-size:13.5px;line-height:1.45;color:var(--sk-ink-faint)}
.ld-card{padding:14px 16px;margin:0 0 10px;border:1.5px solid var(--sk-line);border-radius:16px;background:var(--sk-card)}
/* A rep's own tags on a lead (0539): chips with a remove cross, then a one-line add. */
.ltg-list{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.ltg{display:inline-flex;align-items:center;gap:4px;margin:0;padding:5px 6px 5px 12px;border:1.5px solid var(--sk-line);border-radius:999px;background:var(--sk-brand-tint);font-size:13.5px;font-weight:700}
.ltg button{width:26px;height:26px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--sk-ink-faint);font-size:18px;line-height:1;cursor:pointer}
.ltg-add{display:flex;gap:8px;margin:0}
.ltg-add input{flex:1;min-width:0}
.ml-tagrow{margin-top:-6px}
.ld-meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.ld-meta strong{font-size:15px}
.ld-meta time{flex:none;font-size:11.5px;color:var(--sk-ink-faint)}
.ld-link{display:flex;align-items:flex-start;gap:12px}
.ld-lic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--sk-brand-tint);color:var(--sk-link)}
.ld-lic svg{width:20px;height:20px}
.ld-lw{display:grid;gap:3px;min-width:0;flex:1}
.ld-lw strong{font-size:15px}
.ld-url,.ld-lw small{font-size:12px;color:var(--sk-ink-faint);overflow-wrap:anywhere}
/* Lead page > Latest Alert (2026-10-07): the alert in full, each link with Copy, Open and (PRO) Track it. */
.la-card p{margin:0 0 8px;font-size:14.5px;line-height:1.45}
.la-link{display:grid;gap:4px;padding:10px 0;border-top:1px solid var(--sk-line)}
.la-lbl{font-weight:600;font-size:14px}
.la-url{font-size:12px;color:var(--sk-ink-faint);overflow-wrap:anywhere}
.la-url small{color:var(--sk-link);font-weight:600}
.la-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.la-btns .btn{padding:8px 16px;font-size:14px;min-height:0}
.la-trk{display:contents}
.la-old{margin:0 0 10px}
.la-old summary{cursor:pointer;font-size:14px;padding:6px 0;color:var(--sk-ink-soft)}
.la-old summary time{font-size:11.5px;color:var(--sk-ink-faint);margin-left:6px}
.ld-evs{display:grid;gap:5px;margin-top:8px;padding-top:8px;border-top:1px solid var(--sk-line-soft);font-size:13px;color:var(--sk-ink-soft)}
.ld-evs i{font-style:normal;color:var(--sk-ink-faint)}
.ld-ev{display:grid;grid-template-columns:1.4em 1fr;gap:6px;align-items:start}
.ld-ev>em{font-style:normal;line-height:1.35}
.ld-vid{display:flex;align-items:center;gap:14px}
.ld-vid .ld-lw{display:grid;gap:2px}
.ld-vid .ld-lw span{font-size:14px;color:var(--sk-ink-soft)}
.ld-ring{width:52px;height:52px;flex:none}
.ld-ring-bg{fill:none;stroke:var(--sk-line-soft);stroke-width:4}
.ld-ring-fg{fill:none;stroke:var(--sk-brand);stroke-width:4;stroke-linecap:round}
.ld-ring text{font-size:11px;font-weight:700;fill:var(--sk-ink)}
.ld-clicks{flex:none;text-align:center}
.ld-clicks b{display:block;font-size:20px;color:var(--sk-link)}
.ld-clicks span{font-size:11px;color:var(--sk-ink-faint)}

/* "See how this works" (2026-10-05, Joe's prototype): a small pill by a screen's title, opening its video. */
.how-btn{display:inline-flex;align-items:center;gap:6px;min-height:0;margin:6px 0 4px;padding:6px 11px;border:1px solid var(--sk-line);border-radius:999px;background:var(--sk-card);color:var(--sk-ink-soft);font-size:12.5px;font-weight:800;box-shadow:none}
.how-btn svg{width:13px;height:13px;fill:var(--sk-brand)}
.greet .how-btn{margin-top:8px}
.ml-fh{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px}
.ml-fh .ml-fl{width:auto}
.ml-fh .how-btn{margin:0}
/* My Leads' Purchase Leads, smaller (Jeff, 2026-10-05). */
.ml-buy{padding:8px 13px;border-radius:10px;background:var(--sk-grad);color:#fff;font-size:13px;font-weight:800;text-decoration:none;white-space:nowrap}
.titlerow + .search{margin-top:14px}
/* Home: "Your action items for today" sits close under the four boxes (Jeff, 2026-10-05: "remove the large
   amount of space above the headline"). Every other heading keeps the house 38px. */
.hm-boxes + h2{margin-top:10px}
/* Home's action cards, dark (Jeff, 2026-10-05: "inverted? so, dark? sort of inviting the user to click"):
   the closed card is the brand gradient with white words; opened, Joe's words sit on white below it. */
details.hm-act{border:0;overflow:hidden;box-shadow:0 8px 20px -10px rgba(var(--sk-brand-deep-rgb),.55)}
details.hm-act > summary{background:var(--sk-grad);color:#fff}
details.hm-act .hm-aic{background:#fff;color:var(--sk-brand-deep)}
details.hm-act .hm-car{border-color:#fff}
/* Daily moves' tick (the same cards as Home): a white box in the dark bar, a check when done. */
.hm-tick{flex:none;position:relative;width:30px;height:30px;padding:0;border:2px solid rgba(255,255,255,.85);border-radius:9px;background:transparent;cursor:pointer}
.hm-tick::after{content:"";position:absolute;left:9px;top:4px;width:7px;height:13px;border:solid transparent;border-width:0 3px 3px 0;transform:rotate(45deg)}
.hm-tick[aria-pressed="true"]{background:#fff;border-color:#fff}
.hm-tick[aria-pressed="true"]::after{border-color:var(--sk-brand-deep)}
.soc-sh{margin:0;font-size:18px;line-height:1.3}
.soc-sh + .how-btn{justify-self:start;align-self:flex-start;width:max-content;margin:0}
/* The search topic in its own light box (Jeff, 2026-10-05: "a light box behind the search term ... to give some separation"). */
.soc-term{display:grid;gap:3px;padding:14px 16px;border-radius:14px;background:var(--sk-brand-tint);border:1px solid rgba(var(--sk-brand-rgb),.25)}
.soc-term strong{font-size:19px;color:var(--sk-ink)}
.soc-term span:not(.soc-tl){font-size:14px;color:var(--sk-ink-soft)}
.soc-tl{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--sk-link)}
.opp-top .how-btn{margin:0 0 0 auto}
details.hm-act.on .hm-at{text-decoration:line-through;text-decoration-thickness:1.5px;opacity:.8}
/* A ticked card fades back, so what's left to do stands out (Jeff, 2026-10-06); opening it brings it back */
details.hm-act.on > *{opacity:.5;filter:saturate(.55);transition:opacity .2s,filter .2s}
details.hm-act.on[open] > *,details.hm-act.on:hover > *{opacity:1;filter:none}
/* ...with a gold star on its corner, at full brightness (Jeff, 2026-10-06: "a little gold star ... when its ticked") */
details.hm-act.on{position:relative;overflow:visible}
details.hm-act.on > summary{border-radius:var(--sk-r) var(--sk-r) 0 0}
details.hm-act.on:not([open]) > summary{border-radius:var(--sk-r)}
details.hm-act.on > .hm-ab{border-radius:0 0 var(--sk-r) var(--sk-r)}
details.hm-act.on::after{content:"";position:absolute;top:-9px;right:-7px;width:30px;height:30px;pointer-events:none;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5L2.6 9.4l6.5-.9z' fill='%23F5B301' stroke='%23B07C00' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E");
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));animation:hm-star .45s cubic-bezier(.2,1.6,.4,1) both}
@keyframes hm-star{from{transform:scale(0) rotate(-40deg)}to{transform:scale(1) rotate(0)}}
details.hm-act[open] > summary{border-bottom:0}
details.hm-act[open] .hm-ab{border:1.5px solid rgba(var(--sk-brand-rgb),.35);border-top:0;border-radius:0 0 var(--sk-r) var(--sk-r);background:var(--sk-card)}
/* Home's "Find a conversation online" without PRO: greyed out, still says what PRO is (Jeff, 2026-10-05). */
.btn.hm-off{background:var(--sk-line);border-color:var(--sk-line);color:var(--sk-ink-faint);box-shadow:none}
/* Where Home's "Find a conversation online" lands on Social: above the search card, clear of the sticky header. */
.soc-anchor{display:block;scroll-margin-top:72px}
/* a jump to any #section on a screen (app-nav.js) stops below the top bar, not under it; a rule of its own still wins */
:where(main [id]){scroll-margin-top:80px}
/* The script pop-up (2026-10-05): the X top right on every pop-up, a long script scrolls, the script is
   an editable box, and "Use this script" picks it. */
.sm-dlg > .sm-x{position:absolute;top:8px;right:8px}
.sm-dlg > .sm-x + .lbl,.sm-dlg > .sm-x + h3{margin-right:36px}
.sm-script{width:100%;min-height:240px;margin:2px 0 6px;font-size:16px;line-height:1.5}
.sm-use{width:100%;margin-top:10px}
.sm-x:focus:not(:focus-visible){outline:none;box-shadow:none}

/* A copy button that says what to do next (Post your link, 2026-10-06) */
.cpd-msg{display:grid;gap:2px;text-transform:none;letter-spacing:normal;text-align:center;line-height:1.3}
.cpd-msg b{font-size:16px}
.cpd-msg small{font-size:14px;font-weight:500;opacity:.92}
/* My funnels: a guide's link, with its own copy button under it (2026-10-06) */
.hq-pair{margin-bottom:10px}
.hq-pair .hact{margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
.hq-copy{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;margin:0;border-top:0;border-top-left-radius:0;border-top-right-radius:0}
.hq-copy svg{width:18px;height:18px;flex:none}
/* The Support conversation, pinned on top of the Inbox (0179) */
.sup-rows{margin-bottom:12px}
.sup-row{display:flex;align-items:center;gap:12px}
.sup-row > div:nth-child(2){flex:1;min-width:0}
.sup-ic{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;background:var(--sk-brand-tint);color:var(--sk-link)}
.sup-ic svg{width:22px;height:22px}
.sup-wait{margin:4px 0 14px;font-size:14px;color:var(--sk-ink-faint);text-align:right}
/* Send a message: which script for which goal, and script names the size of the step headings (Joe, 2026-10-06) */
.sm-for{margin:14px 0 6px;font-size:14.5px;font-style:italic;color:var(--sk-ink-faint)}
.sm-opt .sm-name{font-size:18px;line-height:1.3}
/* Admin > a rep's account: their Support conversation (2026-10-10) */
.sup-history .sup-msg{max-width:85%;padding:10px 14px;border-radius:var(--sk-r-sm);background:var(--sk-paper);border:1px solid var(--sk-line)}
.sup-history .sup-msg.us{margin-left:auto;background:var(--sk-brand-tint)}
.sup-history .sup-msg p{margin:0}
.sup-history .sup-msg p.sub{margin:0 0 4px;font-size:12.5px}
/* Admin > a system's Notifications: each one drawn like the phone shows it (2026-10-10) */
.nt-phone{display:grid;gap:2px;padding:12px 14px;border-radius:16px;background:#2b2f36;color:#fff;font-size:15px;line-height:1.35;max-width:440px}
.nt-phone span{color:rgba(255,255,255,.82)}
/* Admin > Notifications: the on/off switch on each one (0219) */
.nt-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.nt-head p,.nt-head legend{margin:0}
.nt-switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;flex:none;font-size:14px;font-weight:600}
.nt-switch input{position:absolute;opacity:0;width:1px;height:1px}
.nt-track{position:relative;width:42px;height:24px;border-radius:12px;background:#c9ccd1;transition:background .15s}
.nt-track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.nt-switch input:checked + .nt-track{background:#22a35a}
.nt-switch input:checked + .nt-track::after{transform:translateX(18px)}
.nt-switch input:focus-visible + .nt-track{outline:2px solid #2563eb;outline-offset:2px}
.nt-word::after{content:"Off";color:var(--sk-muted,#6b7280)}
.nt-switch input:checked ~ .nt-word::after{content:"On";color:inherit}
.nt-off .nt-phone,.nt-off input[type=text]{opacity:.45}
fieldset.nt-rem{border:0;border-bottom:1px solid var(--sk-line-soft);margin:0;min-width:0}
.field .nt-switch span.nt-word,.nt-word{font-family:inherit;font-size:14px;letter-spacing:normal;text-transform:none}
/* Admin > Lead routing: each pack's controls (2026-10-10) */
.lr-owed .btnrow{flex-wrap:wrap;gap:6px}
.lr-total{display:flex;gap:6px;align-items:center}
.lr-total input{width:84px}
/* The daily list's first line, in bold (Joe, 2026-10-06) */
.dread{margin:4px 0 12px;font-size:16px;font-weight:700;line-height:1.45;color:var(--sk-ink)}
/* The daily list: room under the progress bar, and "ACTION ITEM 1:" over each card (Joe, 2026-10-06) */
.dbar + .hm-acts{margin-top:26px}
.act-n{display:block;margin:18px 2px 8px;font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 88,"wght" 700;font-size:13px;letter-spacing:.17em;text-transform:uppercase;color:var(--sk-ink-faint)}
.hm-acts > .act-n:first-child{margin-top:0}
/* Purchase Leads Now sits apart from the daily list above it (Jeff, 2026-10-06: "needs some breathing room") */
.hm-buyrow{margin-top:28px}
/* All done for the day: the bar goes the star's gold, and a box to tell Support (Jeff, 2026-10-06) */
.dbar.gold i{background:linear-gradient(90deg,#F5B301,#FFD34D)}
.dwin{display:grid;gap:8px;margin:16px 0 26px;padding:16px 18px;border-radius:var(--sk-r);background:#FFF6D6;border:1.5px solid #F5B301}
.dwin strong{font-size:18px;color:#5C4300}
.dwin span{font-size:15px;color:#5C4300}
.dwin form{margin:4px 0 0}
.dwin-btn{width:100%;background:linear-gradient(180deg,#FFD34D,#F5B301 55%,#E0A300);border:1.5px solid #B07C00;color:#3A2A00;box-shadow:0 4px 12px -4px rgba(176,124,0,.55),inset 0 1px 0 rgba(255,255,255,.55)}
.dwin-btn:hover{background:linear-gradient(180deg,#FFCB2E,#E8A800 55%,#C98F00);border-color:#B07C00}
/* Top up automatically: the switch, then the two amounts side by side, then Save at its own size (Jeff, 2026-10-06:
   the desktop two-column card scattered it) */
.wallet-auto{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:16px}
.wallet-auto .choice{margin:0}
.wallet-auto .field{margin:0;padding-bottom:0;border-bottom:0}
.wallet-auto button{justify-self:start;min-width:160px}
@media (min-width:760px){
  .wallet-auto{grid-template-columns:1fr 1fr;column-gap:18px}
  .wallet-auto .choice,.wallet-auto button{grid-column:1 / -1}
}
.dwin a{color:#5C4300;font-weight:700;text-decoration:underline}


/* ============================================================
   DARK MODE: the few colours that are not palette tokens (Jeff, 2026-10-06). The tokens
   themselves come from app-theme.mjs darkStyle(), only while <html data-theme="dark">.
   ============================================================ */
:root[data-theme=dark] body{background:var(--sk-paper)}
:root[data-theme=dark] .hm-video{background:#000}
/* The system's logo has dark lettering: its white version where there is one (shared.mjs darkLogo), else whitened. */
.brand img.syslogo-dark{display:none}
:root[data-theme=dark] .brand:has(.syslogo-dark) img.syslogo:not(.syslogo-dark){display:none}
:root[data-theme=dark] .brand img.syslogo-dark{display:block}
:root[data-theme=dark] .brand:not(:has(.syslogo-dark)) img.syslogo{filter:brightness(0) invert(1)}
:root[data-theme=dark] .dwin{background:#2A2109;border-color:#B07C00}
:root[data-theme=dark] .dwin strong,:root[data-theme=dark] .dwin span,:root[data-theme=dark] .dwin a{color:#FFE08A}
:root[data-theme=dark] .pcal-day.gap,:root[data-theme=dark] .pcal-swatch.gap{background:repeating-linear-gradient(45deg,#4A1E1E,#4A1E1E 4px,var(--sk-card) 4px,var(--sk-card) 8px);border-color:#7A2E2E}

/* Account number on the rep's Account page (2026-10-07): read out on a support call, tap to copy. */
.acctno{margin:18px 0 8px;font-size:15px;color:var(--sk-ink-soft)}
.acctno small{display:block;margin-top:4px;font-size:13.5px}
.acctno-btn{font:inherit;font-weight:700;letter-spacing:.08em;color:var(--sk-ink);background:none;border:0;padding:0 0 0 6px;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px;min-height:0;width:auto;box-shadow:none}

/* ============================================================
   EACH FUNNEL'S COLOUR (Jeff, 2026-10-07, local trial; shared.mjs funnelColours): a card in a
   funnel's colour gets that colour's stroke; a row in a list (My Leads, Inbox) a bar down its left
   edge, since rows share their borders. --fc in light, --fcd (lighter) in dark.
   ============================================================ */
[data-fc]{--fcx:var(--fc)}
:root[data-theme=dark] [data-fc]{--fcx:var(--fcd)}
.fcard[data-fc],.hcard[data-fc],.ld-card[data-fc],.soc-post[data-fc]{border:1.5px solid var(--fcx)!important}
.ml-row[data-fc],.row[data-fc]{box-shadow:inset 3px 0 0 var(--fcx)}
/* In a conversation: the lead's bubbles outlined in their funnel's colour, and the funnel named under their name. */
.thread[data-fc] .bubble.them{border:1.5px solid var(--fcx)}
.fc-tag{display:inline-flex;align-items:center;gap:7px;margin:2px 0 0;padding:4px 11px;border:1.5px solid var(--fcx);border-radius:999px;font-size:13.5px;font-weight:600;color:var(--sk-ink-soft)}
.fc-tag i{width:8px;height:8px;border-radius:50%;background:var(--fcx)}

/* Turn on notifications, on Home's first visits (home.mjs PUSH_NUDGE). */
.pn{display:grid;gap:8px;margin:0 0 16px;border-color:var(--sk-brand)}
.pn[hidden],.pn [hidden]{display:none}   /* display:grid outranks the hidden attribute: it showed to everyone, unwired (2026-10-07) */
.pn .sub{margin:0}
.pn .btnrow{margin-top:4px}

/* ---- admin: the menu, a system's tabs, Today (admin-side.mjs shell, admin/today.mjs; Jeff 2026-10-07) ---- */
.adm-nav{display:flex;gap:6px;margin:0 0 22px;padding:6px;background:var(--sk-card);border:1px solid var(--sk-line);
  border-radius:14px;overflow-x:auto;scrollbar-width:none}
.adm-nav::-webkit-scrollbar{display:none}
.adm-nav a{flex:none;padding:9px 16px;border-radius:10px;text-decoration:none;color:var(--sk-ink);font-weight:600;font-size:15px}
.adm-nav a:hover{background:var(--sk-brand-tint)}
.adm-nav a[aria-current]{background:var(--sk-brand);color:#fff}
.adm-sys{margin:0 0 8px;font-size:26px;font-weight:800;letter-spacing:-.01em;color:var(--sk-ink)}
.adm-tabs{display:flex;gap:2px;margin:0 0 20px;border-bottom:1px solid var(--sk-line);overflow-x:auto;scrollbar-width:none}
.adm-tabs::-webkit-scrollbar{display:none}
.adm-tabs a{flex:none;padding:10px 14px;margin-bottom:-1px;text-decoration:none;color:var(--sk-ink-faint);font-weight:600;font-size:15px;
  border-bottom:2px solid transparent}
.adm-tabs a:hover{color:var(--sk-ink)}
.adm-tabs a[aria-current]{color:var(--sk-brand);border-bottom-color:var(--sk-brand)}
.adm-todo{display:grid;gap:8px}
.card.adm-item{border-left:4px solid var(--sk-line)}
.card.adm-item.bad{border-left-color:var(--sk-bad)}
.card.adm-item.warn{border-left-color:var(--sk-warn)}
.card.adm-item.info{border-left-color:var(--sk-brand)}
.adm-clear{border-left:4px solid #2E9E6A}
.adm-h3{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:18px 0 0;font-size:17px}
.adm-more{font-size:14.5px;font-weight:600;color:var(--sk-link)}
.cards.adm-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:700px){.cards.adm-stats{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}}
/* Admin > Accounts as a table (Jeff, 2026-10-07): click a heading to sort. */
.acc-table{padding:6px 0}
.acc-table table{min-width:900px}
.acc-table td{vertical-align:top}
.acc-table td .muted{font-size:13.5px;margin-top:2px;overflow-wrap:anywhere}
table.sortable th{cursor:pointer;user-select:none;white-space:nowrap}
table.sortable th::after{content:"\2195";margin-left:4px;opacity:.3}
table.sortable th[aria-sort=ascending]::after{content:"\2191";opacity:1}
table.sortable th[aria-sort=descending]::after{content:"\2193";opacity:1}
/* The admin side gets a wider page on a big screen: its tables (Accounts, Health) need the room. */
@media (min-width:1100px){ body:has(.adm-nav){grid-template-columns:1fr min(1160px,100%) 1fr} }
.acc-table td:first-child{white-space:normal;min-width:220px;max-width:300px}
.acc-table td:first-child .muted{white-space:normal}
.acc-table th,.acc-table td{padding:11px 10px}
.acc-table td:nth-child(3),.acc-table td:nth-child(4){white-space:normal;min-width:110px}
/* The admin's bottom tab bar (admin-side.mjs tabBar, Jeff 2026-10-07): six places, where the rep app keeps its five,
   while the tabs are a bottom bar (under 900px); the top menu is then hidden. On a desktop the top menu stays and the
   bar is hidden, so no side menu takes the room the admin tables need. */
.tabs.adm-tabbar{grid-template-columns:repeat(6,1fr)}
.tabs.adm-tabbar a{font-size:11.5px}
@media (max-width:899px){ .adm-nav{display:none!important} }
@media (min-width:900px){ .tabs.adm-tabbar{display:none} body:has(.adm-tabbar){padding-left:40px} }
/* The admin side on a phone (Jeff, 2026-10-07: "do a phone pass"; Jeff and Joe open it in the app). A
   system's tabs wrap instead of hiding what is past the edge, and every table turns each row into a small card, each
   value under its heading's name (the shell writes data-label from the heading). A sortable table keeps its headings
   as a row of buttons above the cards. */
@media (max-width:640px){
  .adm-tabs{flex-wrap:wrap;overflow:visible;gap:0 2px}
  .adm-tabs a{padding:9px 10px;font-size:14.5px}
  main:has(.adm-nav) .scroll{overflow:visible}
  main:has(.adm-nav) table,.acc-table table{min-width:0;display:block;border:0;box-shadow:none;background:none}
  main:has(.adm-nav) tbody{display:grid;gap:8px}
  main:has(.adm-nav) thead{display:none}
  main:has(.adm-nav) table.sortable thead{display:block;margin:0 0 10px}
  main:has(.adm-nav) table.sortable thead tr{display:flex;flex-wrap:wrap;gap:6px}
  main:has(.adm-nav) table.sortable th{border:1px solid var(--sk-line);border-radius:999px;padding:6px 10px;background:var(--sk-card)}
  main:has(.adm-nav) tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 14px;padding:14px;
    background:var(--sk-card);border:1px solid var(--sk-line);border-radius:12px}
  main:has(.adm-nav) td{display:block;padding:0;border:0;white-space:normal;min-width:0;max-width:none;overflow-wrap:anywhere}
  main:has(.adm-nav) td:first-child{grid-column:1/-1}
  main:has(.adm-nav) td[data-label]:not(:first-child)::before{content:attr(data-label);display:block;margin-bottom:2px;
    font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--sk-ink-faint)}
  main:has(.adm-nav) td:empty{display:none}
  main:has(.adm-nav) .card:has(> table),main:has(.adm-nav) .card:has(> .scroll > table),.acc-table{padding:0;border:0;box-shadow:none;background:none}
}
/* Admin > a campaign's every message, in order (admin/messages.mjs). */
.seq-flow{margin-top:8px}
.seq-when{margin:22px 0 8px;font-size:14.5px;color:var(--sk-ink-soft)}
.seq-when strong{color:var(--sk-brand)}
.seq-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px}
.seq-link{margin-left:auto;font-size:14.5px;color:var(--sk-link)}
.card.seq-alert{border-left:4px solid var(--sk-warn)}
.card.seq-open{border-left:4px solid var(--sk-brand);margin-bottom:12px}
/* Admin > a campaign's every page, in order (admin/campaigns.mjs). Phone width unless Desktop is chosen. */
.pg-width{display:inline-flex;margin:16px 0 4px;border:1px solid var(--sk-line);border-radius:10px;overflow:hidden}
.pg-width button{border:0;border-radius:0;background:transparent;color:var(--sk-ink-soft);padding:8px 16px;font-weight:600;min-height:0;box-shadow:none}
.pg-width button[aria-pressed=true]{background:var(--sk-brand);color:#fff}
.pg-file{font-family:ui-monospace,Menlo,monospace;font-size:13.5px;overflow-wrap:anywhere;max-width:none}
.pg-frame{display:flex;justify-content:center;background:var(--sk-paper);border-radius:12px;padding:12px 0}
.pg-frame iframe{width:390px;max-width:100%;height:760px;border:0;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--sk-line)}
body.pg-desk .pg-frame iframe{width:100%;border-radius:8px}
/* A list read in order (a campaign's pages, emails, follow-ups, forms; Jeff 2026-10-07: "stack these in small
   rectangles? easier to make out order"): one column of slim rows, the name left and its detail right. */
.stack.rows{gap:6px}
.stack.rows > .card.rowlink{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 16px;padding:12px 16px}
.stack.rows > .card.rowlink .muted{font-size:14px}
/* The email editors' formatting buttons (admin/shared.mjs FMT_BAR). */
.fmtbar{display:inline-flex;gap:4px;align-items:center}
.fmtbar button{min-width:38px;padding:6px 10px;font-size:15px}
.fmtcolor{position:relative;display:inline-grid;place-items:center;width:38px;height:34px;border:1px solid var(--sk-line);border-radius:8px;cursor:pointer;font-weight:700}
.fmtcolor span{border-bottom:3px solid #B3261E;line-height:1.1}
.fmtcolor input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}

/* ---- leaderboard (src/app/leaderboard.mjs, 0200): the Home card, the period tabs, the ranked list, the rep's own place */
.lb-card{display:flex;align-items:center;gap:13px;margin-top:14px;padding:14px 16px;border:1px solid var(--sk-line);border-radius:var(--sk-r);background:var(--sk-card);box-shadow:var(--sk-shadow);color:var(--sk-ink);text-decoration:none;font-weight:700;font-size:16px;line-height:1.3}
.lb-card:hover{border-color:var(--sk-brand)}
.lb-card-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--sk-accent-tint);font-size:21px}
.lb-card b{margin-left:auto;font-size:24px;line-height:1;color:var(--sk-chev)}
.lb-tabs{display:flex;gap:6px;margin:18px 0 14px}
.lb-tabs a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--sk-line);border-radius:999px;color:var(--sk-ink-soft);text-decoration:none;font-weight:600;font-size:15px}
.lb-tabs a[aria-current]{background:var(--sk-brand-tint);border-color:rgba(var(--sk-brand-rgb),.45);color:var(--sk-link)}
.lb-list{list-style:none;margin:0;padding:0;border:1px solid var(--sk-line);border-radius:var(--sk-r);background:var(--sk-card);box-shadow:var(--sk-shadow);overflow:hidden}
.lb-row{display:flex;align-items:center;gap:11px;min-height:64px;padding:10px 16px;border-top:1px solid var(--sk-line-soft);font-size:16px}
.lb-row:first-child{border-top:0}
.lb-me{background:var(--sk-brand-tint)}
.lb-rank{flex:none;width:22px;text-align:center;font-weight:800;color:var(--sk-ink-soft);font-variant-numeric:tabular-nums}
.lb-row:nth-child(-n+3) .lb-rank{color:var(--sk-link)}
.lb-pic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--sk-brand);color:#fff;font-weight:800;font-size:17px}
.lb-who{flex:1;min-width:0;display:grid;gap:2px}
.lb-name{min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-you{margin-left:4px;padding:2px 8px;border-radius:999px;background:var(--sk-brand);color:#fff;font-size:12px;font-weight:700;vertical-align:2px}
.lb-streak{font-size:13.5px;font-weight:600;color:var(--sk-ink-soft)}
.lb-n{flex:none;display:grid;justify-items:end;line-height:1.1}
.lb-n b{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums}
.lb-n small{font-size:12px;font-weight:600;color:var(--sk-ink-soft)}
.lb-join{margin:10px 0 0;font-size:14.5px;line-height:1.45;color:var(--sk-ink-soft)}
.lb-join a{color:var(--sk-link);font-weight:700}
.lb-join .lb-join-ok{font-size:inherit;font-weight:700;margin-left:4px}
/* An explainer line's "Got it" (shared.mjs tip()): small and underlined, after the words. */
.linkish.tip-ok{display:inline;font-size:.9em;font-weight:600;font-style:normal;margin-left:2px;white-space:nowrap}
.lb-mine{display:grid;gap:6px;margin-top:12px;padding:14px 16px;border:1px dashed rgba(var(--sk-brand-rgb),.45);border-radius:var(--sk-r);background:var(--sk-brand-tint)}
.lb-mine strong{color:var(--sk-ink);font-size:16px}
.lb-mine .sub{margin:0;max-width:none;font-size:15.5px}
.lb-mine .btnrow{margin-top:6px}

/* Account > Your picture (0202, app/picture.mjs) */
.rp-seg{display:grid;grid-template-columns:repeat(3,1fr);background:var(--sk-line-soft);border-radius:12px;padding:3px;margin-bottom:14px}
.rp-seg button{padding:9px 4px;border:0;border-radius:9px;background:none;font:inherit;font-weight:700;font-size:14px;color:inherit;opacity:.7;cursor:pointer}
.rp-seg button[aria-pressed="true"]{background:var(--sk-card);opacity:1;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.rp-big{display:flex;justify-content:center;margin:4px 0 14px}
.rp-ring{border-radius:50%;padding:3px;background:conic-gradient(from 200deg,var(--sk-brand-tint),var(--sk-brand),#f7d38a,var(--sk-brand-tint))}
.rp-pic{width:124px;aspect-ratio:1;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--sk-brand);color:#fff;font-weight:800;font-size:46px;border:3px solid var(--sk-card)}
.rp-pic img,.rp-pic svg{width:100%;height:100%;object-fit:cover;display:block}
.rp-row{margin-top:12px}
.rp-row > b{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.7;margin-bottom:7px}
.rp-opts{display:flex;flex-wrap:wrap;gap:6px}
.rp-sw{width:32px;height:32px;border-radius:50%;border:2px solid var(--sk-card);box-shadow:0 0 0 1px rgba(0,0,0,.15);cursor:pointer}
.rp-sw[aria-pressed="true"]{box-shadow:0 0 0 3px var(--sk-brand)}
.rp-thumbs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.rp-th{flex-shrink:0;width:56px;height:56px;border-radius:12px;padding:0;overflow:hidden;border:2px solid transparent;background:var(--sk-line-soft);cursor:pointer}
.rp-th svg{width:100%;height:100%}
.rp-th[aria-pressed="true"]{border-color:var(--sk-brand)}
.rp-pill{font:inherit;font-size:13px;font-weight:600;padding:8px 12px;border-radius:999px;border:0;background:var(--sk-line-soft);color:inherit;cursor:pointer}
.rp-pill[aria-pressed="true"]{background:var(--sk-brand);color:#fff}
.rp-crop{position:relative;width:200px;height:200px;margin:4px auto 10px;border-radius:50%;overflow:hidden;background:#000;touch-action:none;cursor:grab}
.rp-crop img{position:absolute;left:50%;top:50%;max-width:none;user-select:none;-webkit-user-drag:none}
.rp-btns{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.rp-btns label{flex:1;text-align:center;cursor:pointer}
#rp-form{margin-top:16px}
.avatar.has-pic{padding:0;overflow:hidden}
.avatar.has-pic img,.avatar.has-pic svg{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}

/* The quick start reel's box glows gold on a rep's first visits until they open it (app.js; home.mjs data-tour-pulse;
   Jeff 2026-10-09: "pulsing yellow to encourage them to flip through"). */
/* In the accent since 2026-10-11 (gold is for wins now). */
.tour-glow{border-color:var(--sk-accent)!important;animation:tour-glow 1.8s ease-in-out infinite}
@keyframes tour-glow{0%,100%{box-shadow:0 0 0 0 rgba(var(--sk-accent-rgb),.5)}50%{box-shadow:0 0 0 9px rgba(var(--sk-accent-rgb),0),0 0 22px rgba(var(--sk-accent-rgb),.3)}}
@media (prefers-reduced-motion:reduce){.tour-glow{animation:none;box-shadow:0 0 0 3px rgba(var(--sk-accent-rgb),.5)}}

/* Filters on the Funnels screen (setup.mjs hubView, systems.rep_app.link_filters; Jeff 2026-10-09). The section headings
   stay; a section with nothing under the chosen chip leaves, and its count shows what's left. */
.hf-chips{display:flex;gap:8px;overflow-x:auto;margin:14px -2px 2px;padding:2px;scrollbar-width:none}
.hf-chips::-webkit-scrollbar{display:none}
.hf-chips button{flex:0 0 auto;border:1px solid var(--sk-line);background:var(--sk-card,#fff);color:var(--sk-ink);border-radius:99px;padding:8px 14px;
  font:600 14px/1 "Instrument Sans",ui-sans-serif,system-ui,sans-serif;cursor:pointer;min-height:36px}
.hf-chips button[aria-pressed="true"]{background:var(--sk-brand,#0b6b63);border-color:var(--sk-brand,#0b6b63);color:#fff}
.hf-sec{display:contents}
.hf-off{display:none!important}

/* Back on the left, "See how this works" on the right, on every screen that has one (app/shared.mjs layout, data-how-top;
   Jeff 2026-10-09). */
.top-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 16px}
.top-row>.back,.top-row>.how-btn{margin:0}
/* An action item's training reel, at the top of its opened card (home.mjs reelBtn) */
.hm-ab>.hm-reel{margin:0 0 12px}
a.how-btn,a.how-btn span{text-decoration:none}

/* Messages (conversations.mjs, Jeff 2026-10-10): the pencil beside the heading starts a message (shared.mjs
   newMessage), and the send log is one quiet line at the foot. */
.ms-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
/* the way into Email your leads (broadcast.mjs, its only door; on My Leads until 2026-10-25) */
.greet .ms-email,.ms-email{margin:8px 0 0;font-size:14px;font-weight:700}
.ms-email a{color:var(--sk-link)}
.ms-new{flex:none;display:grid;place-items:center;width:46px;height:46px;min-height:0;padding:0;border:0;border-radius:50%;
  background:var(--sk-brand);color:#fff;box-shadow:0 6px 16px rgba(var(--sk-brand-rgb),.32);cursor:pointer}
.ms-new svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.ms-new:active{transform:scale(.94)}
#ms-new .stack{margin-top:4px}
.ms-sent{margin:22px 0 0;text-align:center;font-size:14.5px}
.ms-sent a{color:var(--sk-ink-soft);font-weight:700}
/* A lead's two quiet links at the foot of their page, and their two screens (forget.mjs, 0227). */
.ld-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;margin:34px 0 8px;padding-top:16px;border-top:1px solid var(--sk-line-soft,#eee)}
.ld-foot a{display:inline-block;padding:10px 2px;font-size:13.5px;color:var(--sk-ink-faint);text-decoration:underline;text-underline-offset:3px}
.fg-acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px}
.fg-acts form{margin:0}

/* ---- My team (team.mjs, 0229): a leader's people, counts only ---- */
.tm-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0}
.tm-stats.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.tm-stats .card{padding:14px 12px;display:flex;flex-direction:column;gap:4px;margin:0}
.tm-stats b{font-family:"Archivo",sans-serif;font-variation-settings:"wght" 800;font-size:26px;line-height:1;color:var(--sk-brand-deep)}
.tm-stats span{font-size:13px;line-height:1.3;color:var(--sk-ink-soft)}
.tm-nudge{background:var(--sk-warn-bg);border-color:color-mix(in srgb,var(--sk-warn) 30%,transparent);display:flex;flex-direction:column;gap:10px}
.tm-nudge .sub{color:var(--sk-warn)}
.tm-nrow{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--sk-card);border-radius:var(--sk-r-sm);padding:10px 12px}
.tm-nrow > a{display:flex;flex-direction:column;gap:2px;min-width:0;color:inherit;text-decoration:none}
.tm-nrow > a span{font-size:13px;color:var(--sk-warn)}
.tm-acts{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.tm-acts > *{flex:1 1 160px;justify-content:center;text-align:center}
.tm-row{grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.tm-av{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--sk-brand);color:var(--sk-brand-ink,#fff);
  font-family:"Archivo",sans-serif;font-variation-settings:"wght" 700;font-size:17px}
.tm-n{font-family:"Archivo",sans-serif;font-variation-settings:"wght" 800;font-size:20px;color:var(--sk-brand-deep)}
.tm-below{display:flex;align-items:center;justify-content:space-between;gap:12px;border-style:dashed}
.tm-below b{font-family:"Archivo",sans-serif;font-variation-settings:"wght" 800;font-size:22px;color:var(--sk-brand-deep)}
.tm-setup{background:var(--sk-brand-tint);border-color:transparent}
.tm-head{display:flex;align-items:center;gap:14px;margin:6px 0 4px}
.tm-head .tm-av{width:64px;height:64px;font-size:26px}
.tm-head h1{margin:0}
.tm-home{display:flex;flex-direction:column;gap:6px;background:var(--sk-brand-tint);border-color:transparent;color:inherit;text-decoration:none}
.tm-home .lbl{margin:0}
.tm-home-b{font-size:16px;line-height:1.4}
.tm-home .go{color:var(--sk-link);font-weight:600}
.tm-share{margin:8px 0 12px;padding-left:22px;display:grid;gap:6px}

/* ONE COLOUR, ONE JOB (Jeff, 2026-10-11: "use color to sort of bring some refinement", "bring attention to that first /
   next todo action item", "push that live"; mockup https://claude.ai/artifact/KiEUJm1tLCJGEZFXpGHEoT). Joe's layout and
   words untouched. Brand = the main thing: the NEXT action item (the first not ticked keeps the filled card, with a
   ring, its label in brand), the one filled Home tile, ticks, progress, the tab you're on. Accent (--sk-accent,
   app-theme.mjs accentStyle) = new, or for you: Fast Start, dots, unread counts, the leaderboard. Grey = labels,
   chevrons, help pills, anything not available. Gold = wins (the star, the all-done box). The ground is a touch darker
   than the cards. Most rules here are compound on purpose: the plain classes they touch are edited where they live. */
details.hm-act{border:1px solid var(--sk-line);box-shadow:0 1px 2px rgba(var(--sk-shadow-rgb),.05)}
details.hm-act > summary{background:var(--sk-card);color:var(--sk-ink)}
details.hm-act .hm-aic{background:var(--sk-brand-tint);color:var(--sk-brand)}
details.hm-act .hm-car{border-color:var(--sk-chev)}
details.hm-act .hm-tick{border-color:var(--sk-brand);background:var(--sk-card)}
details.hm-act .hm-tick[aria-pressed="true"]{background:var(--sk-brand);border-color:var(--sk-brand)}
details.hm-act .hm-tick[aria-pressed="true"]::after{border-color:#fff}
/* The next one: the first not ticked. */
details.hm-act:not(.on){border-color:transparent;box-shadow:0 0 0 3px rgba(var(--sk-brand-rgb),.18),0 10px 22px -10px rgba(var(--sk-brand-deep-rgb),.6)}
details.hm-act:not(.on) > summary{background:var(--sk-grad);color:#fff}
details.hm-act:not(.on) .hm-aic{background:#fff;color:var(--sk-brand-deep)}
details.hm-act:not(.on) .hm-car{border-color:#fff}
details.hm-act:not(.on) .hm-tick{border-color:rgba(255,255,255,.9);background:transparent}
.hm-acts .act-n:has(+ details.hm-act:not(.on)){color:var(--sk-brand);font-variation-settings:"wdth" 88,"wght" 800}
/* Every one after the next goes back to the white card. */
details.hm-act:not(.on) ~ details.hm-act:not(.on){border-color:var(--sk-line);box-shadow:0 1px 2px rgba(var(--sk-shadow-rgb),.05)}
details.hm-act:not(.on) ~ details.hm-act:not(.on) > summary{background:var(--sk-card);color:var(--sk-ink)}
details.hm-act:not(.on) ~ details.hm-act:not(.on) .hm-aic{background:var(--sk-brand-tint);color:var(--sk-brand)}
details.hm-act:not(.on) ~ details.hm-act:not(.on) .hm-car{border-color:var(--sk-chev)}
details.hm-act:not(.on) ~ details.hm-act:not(.on) .hm-tick{border-color:var(--sk-brand);background:var(--sk-card)}
.hm-acts details.hm-act:not(.on) ~ .act-n{color:var(--sk-ink-faint);font-variation-settings:"wdth" 88,"wght" 700}
details.hm-act[open] .hm-ab{border:0;border-top:1px solid var(--sk-line-soft)}
/* Home's tiles: Fast Start in the accent; Funnels and Leads with a light chip (Daily Actions stays filled). */
.hm-box[data-tour-pulse]{border-color:var(--sk-accent)}
.hm-box[data-tour-pulse] .hm-ic{background:var(--sk-accent);color:#fff}
.hm-box:not([data-hot]):not([data-tour-pulse]) .hm-ic{background:var(--sk-brand-tint);color:var(--sk-brand)}
/* Quiet rows (Contact Support, training): a grey chip, they're not the main thing. */
.hm-row .hm-ric{background:var(--sk-line-soft);color:var(--sk-ink-soft)}
/* Not available: grey, so it never reads as something to tap. */
.btn:disabled,button.btn[disabled],button:disabled:not(.hm-tick){background:var(--sk-line);border-color:var(--sk-line);color:var(--sk-ink-faint);box-shadow:none;cursor:not-allowed}


/* A CAMPAIGN'S CARD (setup.mjs hubView campaignBody, campaign-kit.mjs; Jeff 2026-10-11/12): the sheets it opens, their
   option rows (.kc-opt) and their one-line rows (.kc-rows). */
.kc-pick .kc-lede{margin:0 0 14px;font-size:15px;line-height:1.45;color:var(--sk-ink-soft)}
.kc-opt{display:flex;align-items:center;gap:14px;padding:14px;margin-bottom:10px;border:1px solid var(--sk-line);border-radius:14px;color:var(--sk-ink);text-decoration:none;background:var(--sk-card,#fff)}
.kc-opt:hover{border-color:rgba(var(--sk-brand-rgb),.45)}
.kc-opt > span:nth-child(2){flex:1;min-width:0}
.kc-opt b{display:block;font-size:16px}
.kc-opt small{display:block;font-size:13.5px;color:var(--sk-ink-soft);margin-top:2px}
.hcard .kc-opt .hchev,.hcard[open] .kc-opt .hchev{transform:rotate(-90deg);color:var(--sk-chev)}
.kc-oi{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--sk-brand-tint);color:var(--sk-brand)}
.kc-oi svg{width:22px;height:22px}
.kc-term{padding:12px 0;border-top:1px solid var(--sk-line-soft)}
.kc-term b{display:block;font-size:16px}
.kc-term small{display:block;font-size:13.5px;color:var(--sk-ink-soft);margin-top:2px}
.kc-plats{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.kc-plats .btn{padding:8px 12px;min-height:40px;font-size:14px}
.kc-pick [data-close]{width:100%;margin-top:6px}
.hurl .kc-cp{flex:none;width:40px;height:40px;min-height:44px;padding:0;display:grid;place-items:center;border:1px solid var(--sk-line);border-radius:10px;color:var(--sk-link);background:var(--sk-card,#fff)}
.hurl .kc-cp svg{width:18px;height:18px}
/* TODAY'S IDEA at the top of action items 3 and 4 (home.mjs ideaBox, 2026-10-11): a tinted box, grey label, ghost buttons
   (the card's own button stays its one filled thing). */
.hm-idea{margin:0 0 16px;padding:14px;border-radius:14px;background:var(--sk-brand-tint);border:1px solid rgba(var(--sk-brand-rgb),.22);text-align:left}
.hm-idea-l{display:block;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--sk-ink-faint);margin-bottom:4px}
.hm-idea b{display:block;font-size:17px;color:var(--sk-ink)}
.hm-idea p{margin:6px 0 12px;font-size:15.5px;line-height:1.45;color:var(--sk-ink-soft)}
/* "Just an idea" (Jeff, 2026-10-14: "wrap it in the light burnt orange color with dark orange text"): literal hex, so it's
   orange on every system (the accent token turns indigo on GLP). */
.hm-idea p.hm-idea-gist{display:block;margin:-2px 0 12px;padding:8px 12px;border-radius:10px;background:#FCEDE6;color:#AE4F23;font-size:14px;font-weight:600;line-height:1.4}
:root[data-theme=dark] .hm-idea p.hm-idea-gist{background:rgba(232,105,47,.16);color:#F4A47C}
.hm-idea-acts{display:flex;flex-wrap:wrap;gap:8px}
.hm-idea-acts .btn,.hm-idea-acts button{flex:1 1 auto;min-height:44px;padding:10px 14px;font-size:15px}
.hm-ab .hm-idea .hm-idea-acts a.ai-btn,.hm-idea .hm-idea-acts a.ai-btn{color:#fff}   /* over .hm-ab a:not(.btn) */
.hm-idea-acts .ai-btn{flex:1 1 100%;justify-content:center;min-height:46px;padding:10px 14px;font-size:15.5px;gap:7px}
.hm-idea-acts .ai-btn .ai-spark{width:18px;height:18px}
/* The card's grouped rows (setup.mjs campaignBody, 2026-10-11): one line each, a copy icon or a chevron at the end, in one
   bordered list per group like the old card's sections. */
.kc-rows{border:1px solid var(--sk-line);border-radius:14px;overflow:hidden;background:var(--sk-card,#fff)}
.kc-rows + .kc-rows{margin-top:10px}
.hurl + .kc-rows{margin-top:10px}
.kc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;padding:12px 14px;border:0;border-radius:0;background:none;box-shadow:none;color:var(--sk-ink);font:inherit;font-size:16px;font-weight:600;text-align:left;text-decoration:none;text-transform:none;letter-spacing:0;cursor:pointer}
.kc-row + .kc-row{border-top:1px solid var(--sk-line-soft)}
.kc-row > span{flex:1;min-width:0}
.kc-row svg{flex:none;width:18px;height:18px}
button.kc-row svg{color:var(--sk-link)}
a.kc-row svg{color:var(--sk-chev);transform:rotate(-90deg)}
.kc-row .pill{margin-left:6px}
button.kc-opt{width:100%;text-align:left;font:inherit;cursor:pointer;min-height:0;box-shadow:none}
/* GENERATE LEADS (setup.mjs campaignBody, 2026-10-11): three numbered moments, one filled button (Copy the caption). */
.ks-goal{margin:0 0 16px;font-size:16px;line-height:1.45;color:var(--sk-ink-soft)}
.ks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.ks-step{display:flex;gap:12px;align-items:flex-start}
.ks-n{flex:0 0 28px;height:28px;border-radius:50%;background:var(--sk-brand);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:700;margin-top:1px}
.ks-in{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.ks-in h4{margin:0;font-size:17px;line-height:1.25;color:var(--sk-ink)}
/* The picture on top at full width, the words under it (Jeff, 2026-10-11: "stack the image and text post there so the
   image is bigger and easier to see"). */
.ks-post{display:flex;flex-direction:column;gap:12px;width:100%;padding:12px;border-radius:14px;background:var(--sk-brand-tint)}
.ks-img{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:10px}
.ks-cap{margin:0;min-width:0;font-size:15px;line-height:1.45;color:var(--sk-ink);white-space:pre-line;overflow-wrap:anywhere}
.ks-acts{display:flex;flex-wrap:wrap;gap:8px}
.ks-acts .btn,.ks-in > .btn{min-height:44px;padding:10px 16px;font-size:15px;text-transform:none;letter-spacing:0}
.ks-next{font-size:14.5px}
/* POST THIS TODAY on a campaign card without a kit (setup.mjs hubView todayPost, 2026-10-14): the post picked for this rep today. */
.ks-step.kt{margin:0 0 14px}
.kt .ks-in{display:flex;flex-direction:column;gap:10px;width:100%;min-width:0}
.kt h4{margin:0}
.kt-then{margin:0;font-size:14.5px;color:var(--sk-ink-soft)}
.ks-links{margin-top:10px}
.ks-msg{width:100%;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.ks-say{margin:0;width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--sk-line);background:var(--sk-card,#fff);font-size:14.5px;line-height:1.45;color:var(--sk-ink);white-space:pre-line;overflow-wrap:anywhere}
.ks-msg .ks-acts{align-items:center}
.ks-ed{width:100%;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.ks-ta{width:100%;min-height:110px;font:inherit;font-size:15px;line-height:1.45;padding:10px 12px;border-radius:12px;border:1px solid var(--sk-line);background:var(--sk-card,#fff);color:var(--sk-ink)}
.ks-msg [hidden]{display:none!important}   /* the flex rules above would otherwise show a hidden edit box */
/* THREE BIG BUTTONS (setup.mjs campaignBody; Jeff 2026-10-12): How this campaign works, Generate leads
   (the one filled button), Campaign assets. Generate leads opens the three moments in a sheet. */
.kb{display:flex;flex-direction:column;gap:10px}
.kb-big{display:flex;align-items:center;gap:14px;width:100%;min-height:76px;padding:14px;border:1px solid var(--sk-line);border-radius:16px;background:var(--sk-card,#fff);color:var(--sk-ink);font:inherit;text-align:left;text-decoration:none;text-transform:none;letter-spacing:0;box-shadow:none;cursor:pointer;font-variation-settings:normal}
.kb-big:hover{border-color:rgba(var(--sk-brand-rgb),.45)}
.kb-i{flex:none;width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--sk-brand-tint);color:var(--sk-brand)}
.kb-i svg{width:24px;height:24px}
.kb-t{flex:1;min-width:0}
.kb-t b{display:block;font-size:17.5px;line-height:1.25}
.kb-t small{display:block;margin-top:3px;font-size:14px;font-weight:500;line-height:1.35;color:var(--sk-ink-soft)}
.kb-big.on{background:var(--sk-brand);border-color:var(--sk-brand);color:var(--sk-brand-ink,#fff)}
.kb-big.on .kb-i{background:rgba(255,255,255,.18);color:var(--sk-brand-ink,#fff)}
.kb-big.on .kb-t small{color:rgba(255,255,255,.88)}
.hcard .kb-big .hchev,.hcard[open] .kb-big .hchev{transform:rotate(-90deg);color:var(--sk-chev)}
.hcard .kb-big.on .hchev{color:var(--sk-brand-ink,#fff)}
.kb-sheet .ks{padding:0;display:flex;gap:18px;margin:4px 0 6px}
.kb-sheet .hsub{margin-top:22px}
/* GENERATE LEADS AS ITS OWN SCREEN (links.mjs /links/:slug/leads, the review accounts first; Jeff 2026-10-12): steps 2 to
   4 closed to their question until tapped, and a text post said to be one. */
.kl .ks{margin:0 0 6px}
.ks-acc{gap:0}
.ks-acc > summary{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:32px;list-style:none;cursor:pointer}
.ks-acc > summary::-webkit-details-marker{display:none}
.ks-acc > summary svg{flex:none;width:18px;height:18px;color:var(--sk-chev);transition:transform .15s}
.ks-acc[open] > summary svg{transform:rotate(180deg)}
.ks-acc[open] > summary{margin-bottom:10px}
.ks-tp{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--sk-ink-faint)}
dialog.kb-sheet{overscroll-behavior:contain}
.kl .kc-opt .hchev{transform:rotate(-90deg);color:var(--sk-chev)}
.ks-acts [hidden],.ks-step [hidden]{display:none!important}   /* .btn sets a display, which would show a hidden Save the image on a text post */
.kl > .hsub:first-child{margin-top:0}
.ks-pacts{align-items:center}
/* Follow up scripts: Joe's groups from the funnel's training page (setup.mjs followUpScripts) */
.fs-grp{margin-top:26px;padding-top:18px;border-top:1px solid var(--sk-line)}
.fs-h{margin:0 0 8px;font-size:19px;line-height:1.3;color:var(--sk-ink)}
.fs-h + .fs-lede + .fs-h{margin-top:18px}
.fs-lede{margin:0 0 16px;font-size:15px;line-height:1.5;color:var(--sk-ink-soft)}
.fs-lede p,.fs-coach p{margin:0 0 8px}
.fs-lede p:last-child,.fs-coach p:last-child{margin-bottom:0}
.fs-coach{font-size:13.5px;line-height:1.45;color:var(--sk-ink-faint)}
.fs-tag{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--sk-ink-faint)}
/* Where a found conversation is, in that site's own logo and colour (Jeff, 2026-10-12: "the reddit, quora pills, can we
   use their logo and colors there?"). Brand colours, so the same in light and dark. */
.opp-src{display:inline-flex;align-items:center;gap:6px;border-color:transparent;color:#fff}
.opp-src svg{flex:none}
.opp-reddit{background:#FF4500}
.opp-quora{background:#B92B27}
/* A found conversation's card in that site's colour, not the app's (Jeff, 2026-10-12: "change the teal to the brand
   color, reddit, pinterest etc"): the edge, Your angle and Open the thread. The search buttons' marks in theirs. */
.card.opp-ch-reddit{--opp:#FF4500}
.card.opp-ch-quora{--opp:#B92B27}
.card.opp.opp-ch-reddit,.card.opp.opp-ch-quora{border-image:none;border-left-color:var(--opp)}
.opp-ch-reddit .opp-angle strong,.opp-ch-quora .opp-angle strong{color:var(--opp)}
.opp-ch-reddit .opp-acts a.btn,.opp-ch-quora .opp-acts a.btn{background:var(--opp);border-color:var(--opp);color:#fff}
.platforms .btn svg{color:var(--pc,currentColor)}
/* Pinterest trends on Social (social.mjs trendsCard, 2026-10-12): its button in Pinterest's red. */
.soc-trends p{margin:0;font-size:16px;line-height:1.5;color:var(--sk-ink-soft)}
.soc-trends p strong{color:var(--sk-ink)}
.btn.soc-ptrends{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px;background:#E60023;border-color:#E60023;color:#fff}
.btn.soc-ptrends svg{flex:none}
.btn.soc-pnow{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px;color:#E60023;border-color:#E60023}
.btn.soc-pnow svg{flex:none}
.soc-phint{margin:0;font-size:14px}
/* BEFORE GENERATE LEADS (links.mjs /links/:slug/start, Jeff 2026-10-13): the words, then Joe's message opening in place
   under its button and Generate leads now. */
.gl-start{margin:0 0 16px}
.gl-start p{margin:0}
.gl-joe > summary{list-style:none}
.gl-joe > summary::-webkit-details-marker{display:none}
.gl-start ~ .kb > .kb-big .hchev,.gl-joe:not([open]) > summary .hchev{transform:rotate(-90deg);color:var(--sk-chev)}
.gl-start ~ .kb > .kb-big.on .hchev{color:var(--sk-brand-ink,#fff)}
.gl-joe .hm-video{margin:10px 0 0}
/* ONE AT A TIME (home.mjs actionItems, Jeff 2026-10-13): the next item on its own, then the rest in one fold. In the fold
   every card is the plain white one; only the item standing on its own gets the "next" look. */
.act-next .act-n{margin-top:0}
.act-i.act-in{animation:act-in .35s ease both}
@keyframes act-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.act-i.act-in{animation:none}}
.act-rest{margin-top:6px}
.act-rest > summary{display:flex;align-items:center;gap:10px;min-height:56px;padding:12px 16px;border:1px dashed var(--sk-line);border-radius:16px;background:transparent;color:var(--sk-ink);font-weight:700;font-size:15.5px;list-style:none;cursor:pointer}
.act-rest > summary::-webkit-details-marker{display:none}
.act-rest-t{flex:1;min-width:0}
.act-rest-n{color:var(--sk-ink-faint);font-weight:600;font-size:14px}
.act-rest > summary .hm-car{border-color:var(--sk-chev)}
.act-rest[open] > summary{margin-bottom:6px}
.act-rest .act-n{color:var(--sk-ink-faint);font-variation-settings:"wdth" 88,"wght" 700}
.act-rest details.hm-act:not(.on){border-color:var(--sk-line);box-shadow:0 1px 2px rgba(var(--sk-shadow-rgb),.05)}
.act-rest details.hm-act:not(.on) > summary{background:var(--sk-card);color:var(--sk-ink)}
.act-rest details.hm-act:not(.on) .hm-aic{background:var(--sk-brand-tint);color:var(--sk-brand)}
.act-rest details.hm-act:not(.on) .hm-car{border-color:var(--sk-chev)}
.act-rest details.hm-act:not(.on) .hm-tick{border-color:var(--sk-brand);background:var(--sk-card)}
.act-rest[open] > summary .hm-car{transform:translateY(2px) rotate(-135deg)}

/* A form that only goes once, after the tap (app.js data-once): a spinner and what's happening, not a button. */
form.once-busy button[disabled]{background:transparent;border:1px solid var(--sk-line);color:var(--sk-ink-soft);box-shadow:none;cursor:wait;display:inline-flex;align-items:center;justify-content:center;gap:10px}
form.once-busy button[disabled]::before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:once-spin .8s linear infinite}
@keyframes once-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){form.once-busy button[disabled]::before{animation-duration:2.4s}}

/* A way to generate leads with nowhere to go yet (links.mjs /links/:slug/start). */
.kb-big.kb-off{opacity:.55;cursor:default}

/* Find conversations (links.mjs /links/:slug/find): the suggested searches as big picks, then the Social tab's
   platform buttons for the one picked. */
.fc{gap:12px}
.fc-terms{display:grid;gap:8px}
.fc-term{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;border:1.5px solid var(--sk-line, rgba(0,0,0,.12));cursor:pointer}
.fc-term input{margin-top:4px;accent-color:var(--sk-brand)}
.fc-term span{display:grid;gap:2px}
.fc-term strong{font-size:17px;color:var(--sk-ink)}
.fc-term small{font-size:14px;color:var(--sk-ink-soft)}
.fc-term:has(input:checked){background:var(--sk-brand-tint);border-color:rgba(var(--sk-brand-rgb),.55)}
.fc-for{display:grid;gap:10px}
.fc-for[hidden]{display:none}
.fc .platforms{margin-top:0}

/* Home's Fast Start Guide bar (home.mjs homeBoxes; Jeff 2026-10-13: "stretch that across the top, not as tall, keep it
   orange and give it a 'dismiss' x"), and the note that it moved to the menu. */
.hm-fsg{display:flex;align-items:stretch;margin-top:14px;border-radius:14px;background:var(--sk-accent);color:#fff;overflow:hidden}
.hm-fsg-go{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:11px 14px;color:#fff;text-decoration:none}
.hm-fsg-go b{display:block;font-size:16px;line-height:1.2}
.hm-fsg-go small{display:block;font-size:13px;opacity:.9}
.hm-fsg-ic{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.22)}
.hm-fsg-x{flex:none;width:48px;border:0;border-left:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;font-size:26px;line-height:1;cursor:pointer}
.hm-fsg.tour-glow,.hm-fsg-go.tour-glow{border-color:transparent}
.hm-fsg-where{display:flex;align-items:center;gap:12px;margin:6px 0 16px;font-weight:700;color:var(--sk-ink)}
.hm-fsg-burger{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:2px solid var(--sk-accent);box-shadow:0 0 0 4px rgba(var(--sk-accent-rgb),.2)}
.hm-fsg-burger svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.hm-fsg-row svg,.hm-fsg-ic svg{width:18px;height:18px;flex:none}
.hm-fsg-arrow{color:var(--sk-accent);font-size:20px}
.hm-fsg-row{white-space:nowrap;display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;background:var(--sk-brand-tint)}

/* Home's daily actions, its own card (home.mjs; Jeff 2026-10-13), so it doesn't read as part of the two boxes above */
.hm-daily{margin-top:22px;padding:16px 14px 18px;border:1px solid var(--sk-line);border-radius:var(--sk-r);background:var(--sk-card);box-shadow:var(--sk-shadow)}
.hm-daily > h2:first-child{position:static;margin:0 0 10px;padding:0 2px;background:none;letter-spacing:.12em;color:var(--sk-ink)}
.hm-daily > h2:first-child::after{display:none}
.hm-build{position:static;margin:22px 0 0;padding:0 2px;background:none;letter-spacing:.12em;color:var(--sk-ink)}
.hm-build::after{display:none}
.hm-build + .hm-boxes{margin-top:10px}

/* The rep's name on Home in the buttons' gradient (Jeff, 2026-10-13: "make the reps name on home screen gradient like
   the button colors") */
.greet-name{background:linear-gradient(100deg, var(--sk-brand) 0%, var(--sk-brand-deep) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
:root[data-theme="dark"] .greet-name{background-image:linear-gradient(100deg, color-mix(in srgb, var(--sk-brand) 55%, #fff) 0%, var(--sk-brand) 100%)}
/* Account > Show the tips again: a form button drawn as a menu row (settings.mjs /settings/tips) */
button.mrow{width:100%;font:inherit;text-align:left;cursor:pointer}

/* THE TROPHY CASE (0283, src/app/trophies.mjs; Jeff, 2026-10-14). Gold is for a finished win (APP-COLOUR-SOP): an earned
   badge sits in the star's gold; one not earned yet is grey, its emoji greyed, with how far along it is. */
.tro-list{list-style:none;margin:18px 0 14px;padding:0;display:grid;gap:10px}
.tro{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--sk-line);border-radius:var(--sk-r);background:var(--sk-card);box-shadow:var(--sk-shadow)}
.tro-ic{position:relative;flex:none;display:grid;place-items:center;width:56px;height:56px}
.tro-ic img{width:100%;height:100%;object-fit:contain}
.tro:not(.tro-won) .tro-ic img{filter:brightness(0);opacity:.12}   /* not yet: just its silhouette (Jeff, 2026-10-14: "fade the black and white ones more ... maybe just a shillouette") */
:root[data-theme=dark] .tro:not(.tro-won) .tro-ic img{filter:brightness(0) invert(1);opacity:.14}
.tro-won{border-color:#F5B301;background:linear-gradient(180deg,#FFF9E6,var(--sk-card))}
.tro-x{position:absolute;right:-8px;bottom:-6px;padding:2px 6px;border-radius:999px;background:#3A2A00;color:#FFD34D;font-size:12px;font-weight:800;line-height:1.2;letter-spacing:.01em;box-shadow:0 0 0 2px var(--sk-card)}
.tro-t{display:grid;gap:3px;min-width:0}
.tro-t b{font-size:16px;line-height:1.25;color:var(--sk-ink)}
.tro-t small{font-size:13.5px;line-height:1.35;color:var(--sk-ink-soft)}
.tro-p{font-size:12.5px;font-weight:700;color:var(--sk-ink-faint)}
.tro-won .tro-p{color:#8A6300}
.tro-bar{display:block;height:6px;margin-top:4px;border-radius:999px;background:var(--sk-line-soft);overflow:hidden}
.tro-bar i{display:block;height:100%;border-radius:inherit;background:var(--sk-ink-faint)}
.tro-card{display:flex;align-items:center;gap:13px;margin-top:14px;padding:12px 16px;border:1.5px solid #F5B301;border-radius:var(--sk-r);background:#FFF6D6;color:#3A2A00;text-decoration:none;box-shadow:var(--sk-shadow)}
.tro-card .tro-ic{width:46px;height:46px}
.tro-card-t{display:grid;gap:2px}
.tro-card-t b{font-size:16px;line-height:1.25}
.tro-card-t small{font-size:13.5px;color:#6B4F00}
.tro-card > b{margin-left:auto;font-size:24px;line-height:1;color:#8A6300}
/* Daily actions: the trophy case under the list (trophies.mjs trophyStrip; Jeff, 2026-10-14: "more prominent"). */
.tro-strip{display:grid;gap:12px;margin-top:16px;padding:14px 16px 16px;border:1.5px solid #F5B301;border-radius:var(--sk-r);background:var(--sk-card);color:var(--sk-ink);text-decoration:none;box-shadow:var(--sk-shadow)}
.tro-strip-h{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:10px}
.tro-strip-h b:first-child{font-size:17px;line-height:1.25}
.tro-strip-h small{grid-column:1;font-size:13.5px;color:var(--sk-ink-soft)}
.tro-strip-h > b[aria-hidden]{grid-column:2;grid-row:1 / span 2;font-size:24px;line-height:1;color:#8A6300}
.tro-strip-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.tro-strip .tro-strip-row li.tro{display:block;padding:0;border:0;background:none;box-shadow:none;min-width:0}
.tro-strip-row .tro-ic{width:100%;height:auto;aspect-ratio:1}
.tro-strip-row .tro:not(.tro-won) .tro-ic img{opacity:.2}
:root[data-theme=dark] .tro-strip-h > b[aria-hidden]{color:#FFD34D}
.tro-chips{list-style:none;margin:6px 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tro-chip-ic{display:inline-block;width:22px;height:22px}.tro-chip-ic img{width:100%;height:100%}
.tro-chips li{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:#FFF6D6;border:1px solid #F5B301;color:#3A2A00;font-size:13.5px;font-weight:700}
:root[data-theme=dark] .tro-won{background:linear-gradient(180deg,#2E2510,var(--sk-card))}
:root[data-theme=dark] .tro-won .tro-p{color:#FFD34D}
:root[data-theme=dark] .tro-card,:root[data-theme=dark] .tro-chips li{background:#2E2510;color:#FFE9A8}
:root[data-theme=dark] .tro-card-t small,:root[data-theme=dark] .tro-card > b{color:#FFD34D}

/* The language a rep's links open in (link-lang.mjs, 0337): a row of languages at the top of Links. */
.ll-pick{margin:4px 0 16px;display:flex;flex-direction:column;gap:6px}
.ll-lbl{font-size:13px;font-weight:600;color:var(--sk-ink-soft)}
.ll-row{display:flex;flex-wrap:wrap;gap:6px}
.ll-row a,.ll-row .ll-on{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:999px;font-size:14px;text-decoration:none;border:1px solid var(--sk-line);background:var(--sk-card);color:var(--sk-ink)}
.ll-row .ll-on{background:var(--sk-brand);border-color:var(--sk-brand);color:#fff;font-weight:600}
.ll-note{font-size:12.5px;color:var(--sk-ink-faint)}

/* ------------------------------------------------------------------ AI: the orange, and the sparkle (lib/ai-look.mjs) */
.ai-spark{width:22px;height:22px;flex:none;overflow:visible}
.ai-spark path{fill:currentColor;transform-box:fill-box;transform-origin:center}
.ai-s1{animation:ai-twinkle 2.6s ease-in-out infinite}
.ai-s2{animation:ai-twinkle 2.6s ease-in-out 1.3s infinite}
@keyframes ai-twinkle{0%,100%{transform:scale(1) rotate(0);opacity:1}45%{transform:scale(.78) rotate(45deg);opacity:.7}55%{transform:scale(1.15) rotate(60deg);opacity:1}}
.ai-btn::after,.ai-row::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 46%,rgba(255,255,255,.38) 50%,transparent 54%);background-size:300% 100%;animation:ai-shine 5.5s ease-in-out infinite}
@keyframes ai-shine{0%{background-position:120% 0}22%,100%{background-position:-20% 0}}
.ai-btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:9px;padding:13px 20px;border-radius:10px;font-weight:700;text-decoration:none;
  background:linear-gradient(135deg,color-mix(in srgb,var(--sk-ai-deep) 70%,var(--sk-ai-night)) 0%,var(--sk-ai-deep) 50%,color-mix(in srgb,var(--sk-ai) 65%,var(--sk-ai-deep)) 100%);
  color:#fff;border:1px solid color-mix(in srgb,var(--sk-ai-glow) 45%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 24px -12px var(--sk-ai-deep)}
.ai-btn:hover{filter:brightness(1.08)}
.kb-big.ai-row{position:relative;overflow:hidden;isolation:isolate;color:#fff;border-color:color-mix(in srgb,var(--sk-ai-glow) 45%,transparent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--sk-ai-deep) 70%,var(--sk-ai-night)) 0%,var(--sk-ai-deep) 55%,color-mix(in srgb,var(--sk-ai) 65%,var(--sk-ai-deep)) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 12px 28px -16px var(--sk-ai-deep)}
.kb-big.ai-row:hover{border-color:var(--sk-ai-glow)}
.kb-big.ai-row .kb-i{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.kb-big.ai-row .kb-i .ai-spark{width:26px;height:26px}
.kb-big.ai-row .kb-t small{color:rgba(255,255,255,.86)}
/* About you's banner on Home (ai-look.mjs aiBanner): its own gap from the Fast Start Guide bar above it */
.kb-big.hm-story{margin:12px 0 0}
/* the glitter: nine tiny stars, each its own place, size and moment */
.ai-glit{position:absolute;inset:0;z-index:-1;pointer-events:none}
.ai-glit i{position:absolute;animation-duration:2.6s!important;width:9px;height:9px;background:#fff;opacity:0;filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px var(--sk-ai-glow));
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:ai-glint 3.2s ease-in-out infinite}
/* Only at the two ends, clear of the words (Joe, 2026-10-19: a star sat over "Personalize" and one poked out below the
   button; Jeff: "do the sparkle fix"). Left ones from the left edge, right ones from the right, all inside the box. */
.ai-glit i:nth-child(1){left:3%;top:16%;animation-delay:0s}
.ai-glit i:nth-child(2){left:6%;top:62%;width:7px;height:7px;animation-delay:.7s}
.ai-glit i:nth-child(3){right:4%;top:14%;width:11px;height:11px;animation-delay:1.5s}
.ai-glit i:nth-child(4){right:7%;top:64%;width:7px;height:7px;animation-delay:2.2s}
.ai-glit i:nth-child(5){left:9%;top:28%;width:6px;height:6px;animation-delay:.35s}
.ai-glit i:nth-child(6){right:2%;top:46%;width:8px;height:8px;animation-delay:1.1s}
.ai-glit i:nth-child(7){right:10%;top:24%;width:6px;height:6px;animation-delay:1.9s}
.ai-glit i:nth-child(8){left:2%;top:44%;width:6px;height:6px;animation-delay:2.6s}
.ai-glit i:nth-child(9){right:5%;top:76%;width:6px;height:6px;animation-delay:2.9s}
@keyframes ai-glint{0%,100%{opacity:0;transform:scale(.2) rotate(0)}10%{opacity:1;transform:scale(1.1) rotate(40deg)}18%{opacity:.85;transform:scale(.9) rotate(70deg)}30%{opacity:0;transform:scale(.3) rotate(110deg)}}
@media (prefers-reduced-motion: reduce){.ai-s1,.ai-s2,.ai-btn::after,.ai-row::after,.ai-glit i{animation:none}.ai-glit i{opacity:.5}}
/* The daily post's caption keeps its blank lines (spaceOut, Joe 2026-10-17). */
.soc-cap{white-space:pre-line}
/* Send a link's apps, each in its colour with its mark (send.mjs whereDialog, Jeff 2026-10-17). */
.snd-where .btn svg,.snd-where button svg{flex:none;margin-right:8px}
.snd-where .snd-app{background:var(--ac);border-color:var(--ac);color:#fff}
.snd-where .snd-app:hover{filter:brightness(.94)}

/* Your website (src/app/website.mjs, 0393): the look row, the editor's pairs, and the swipe picker (.wsx-*). */
.wsx-look{display:flex;align-items:center;gap:12px;padding:16px;margin:0 0 14px;border-radius:16px;background:var(--brand,#0abab5);color:#fff;text-decoration:none}
.wsx-look-t{flex:1;display:flex;flex-direction:column;gap:2px}
.wsx-look-t b{font-size:17px}
.wsx-look-t span{font-size:14px;opacity:.9}
.wsx-look-go{font-size:22px}
.wsx-pair{display:grid;gap:8px}
@media (min-width:640px){.wsx-pair{grid-template-columns:1fr 1.6fr}}
.wsx-hours{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wsx-check{display:flex;gap:10px;align-items:center;font-weight:400}
.wsx-check input{width:auto}
.wsx-swipe{max-width:420px;margin:0 auto}
.wsx-stack{position:relative;height:clamp(330px,calc(100dvh - 430px),620px);margin-top:4px}
.wsx-card{position:absolute;inset:0;border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.18);touch-action:pan-y;user-select:none}
.wsx-frame{position:absolute;inset:44px 0 0;overflow:hidden}
.wsx-frame iframe{border:0;transform-origin:0 0;display:block;pointer-events:none;background:#fff}
.wsx-grab{position:absolute;inset:0;cursor:grab}
.wsx-name{position:absolute;left:0;right:0;top:0;height:44px;display:flex;align-items:center;justify-content:center;white-space:nowrap;background:#111;color:#fff;font-size:14px;font-weight:700;pointer-events:none}
.wsx-stamp{position:absolute;top:62px;padding:6px 14px;border:3px solid;border-radius:10px;font-size:22px;font-weight:800;text-transform:uppercase;opacity:0;transition:opacity .12s;pointer-events:none;background:rgba(255,255,255,.85)}
.wsx-keep{left:16px;color:#16a34a;transform:rotate(-12deg)}
.wsx-skip{right:16px;color:#dc2626;transform:rotate(12deg)}
.wsx-card.is-keep .wsx-keep,.wsx-card.is-skip .wsx-skip{opacity:1}
.wsx-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.wsx-done h2{margin-top:6px}
.wsx-kept button{width:100%}
.wsx-sub a{overflow-wrap:anywhere}
.wsx-swipe [hidden]{display:none!important}
.wsx-photos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wsx-photo{display:flex;flex-direction:column;gap:6px}
.wsx-photo img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;display:block}
.wsx-photo-acts{display:flex;flex-direction:column;gap:6px}
.wsx-photo-acts button{width:100%;padding:8px 10px;font-size:13.5px}
.wsx-main{font-size:13px;font-weight:700;text-align:center;padding:6px 0}
.wsx-add{display:flex;flex-direction:column;gap:6px}
.wsx-pick{cursor:pointer;text-align:center}

/* Bookings (src/app/bookings.mjs, 0397): a booked time's row, and a day's hours. */
.bkx-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.bkx-time{font-weight:800;font-variant-numeric:tabular-nums;min-width:72px}
.bkx-who{display:flex;flex-direction:column;gap:2px;min-width:0}
.bkx-who small{opacity:.75}
.bkx-cancel button{padding:8px 12px;font-size:14px}
.bkx-day{display:grid;grid-template-columns:1fr 1fr;gap:6px 8px;align-items:center}
.bkx-day .wsx-check{grid-column:1 / -1}
.bkx-day input[type=time]{width:auto;padding:8px}
.bkx-day input[type=time]{min-width:0;width:100%}

/* PERSONALIZE THIS (setup.mjs campaignLeads, app.js; Jeff, 2026-10-18): the orange button under Post this today, the
   caption shimmering while it's written, and the line that says it's theirs now. */
.ks-pacts.ks-me{display:grid;grid-template-columns:1fr auto;gap:8px;max-width:340px}
.ks-pacts.ks-me:has(.ks-save[hidden]) .ks-copy{grid-column:1/-1}   /* a text post: no image button, Copy runs across */
.ks-me .ai-btn{grid-column:1/-1;justify-content:center;border:0;cursor:pointer;font-size:15px;min-height:44px;padding:10px 14px;gap:7px}
.ks-me .ai-btn .ai-spark{width:18px;height:18px}
.ks-ico{width:44px;padding:0!important;display:inline-grid;place-items:center}
.ks-ico svg{width:20px;height:20px}
.ks-more{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:8px 0 0;font-size:14.5px;color:var(--sk-ink-soft)}
.ks-more .linkish{font-size:14.5px}
/* Names it / Curiosity over a post (0529, campaign-posts.mjs curiosityToggle; app.js ksPaint, cuCard): Account > Your
   picture's segmented look (.rp-seg), two halves. */
.cu-tog{display:grid;grid-template-columns:1fr 1fr;background:var(--sk-line-soft);border-radius:12px;padding:3px;margin:0 0 10px}
.cu-tog[hidden]{display:none}
.cu-tog button{min-height:40px;padding:8px 4px;border:0;border-radius:9px;background:none;font:inherit;font-weight:700;font-size:14.5px;color:inherit;opacity:.7;cursor:pointer}
.cu-tog button[aria-pressed="true"]{background:var(--sk-card);opacity:1;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.ks-edsep[hidden]{display:none}
.ks-me .ai-btn:disabled{cursor:progress;opacity:.92}
.ks-me-tag{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:8px 0 0;font-size:13.5px;color:var(--sk-ai-deep)}
.ks-me-tag .ai-spark{width:16px;height:16px;color:var(--sk-ai)}
.ks-me-tag .linkish{font-size:13.5px}
.ks-me-need{margin:8px 0 0;font-size:14px;color:var(--sk-ink-soft)}
.ks-me-need a{color:var(--sk-link);font-weight:600}
.ks-cap.ks-pz-on{background:linear-gradient(90deg,var(--sk-ink-soft) 0%,var(--sk-ai) 50%,var(--sk-ink-soft) 100%);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:ks-pz 1.6s linear infinite}
@keyframes ks-pz{to{background-position:-200% 0}}
.ks-spk{position:fixed;z-index:60;pointer-events:none;width:18px;height:18px;margin:-9px 0 0 -9px;color:var(--sk-ai)}
.ks-spk svg{width:100%;height:100%}

/* Send A Message: Personalize in a script's pop-up (send.mjs .sm-pz, send.js) */
.sm-pz{display:grid;gap:8px;margin:0 0 12px}
.sm-pz .ai-btn{justify-content:center;border:0;cursor:pointer;font-size:16px;min-height:48px;padding:10px 14px;gap:7px;width:100%}
.sm-pz .ai-btn .ai-spark{width:18px;height:18px}
.sm-pz .ai-btn:disabled{cursor:progress;opacity:.92}
.pz-left{display:block;font-size:12.5px;color:var(--sk-ink-soft);font-variant-numeric:tabular-nums;text-align:center}
.ks-left{margin:6px 0 0;max-width:340px}
.ks-left .pz-left{text-align:left}
.abt-meet .pz-left{text-align:left;margin-top:6px}
.sm-pz-tag[hidden]{display:none}
.sm-pz-tag{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 6px;margin:0;font-size:14px;color:var(--sk-ai-deep)}
.sm-pz-tag .ai-spark{width:16px;height:16px;color:var(--sk-ai)}
.sm-pz-tag .linkish{font-size:14px}
.sm-pz-need{margin:0;font-size:14px;color:var(--sk-ink-soft);text-align:center}
.sm-pz-need a{color:var(--sk-link);font-weight:600}
.sm-script.sm-pz-on{color:transparent;text-shadow:0 0 7px var(--sk-ai);transition:color .3s,text-shadow .3s}
.ks-voice{margin:4px 0 0}

/* YOUR TONE (src/app/tone.mjs, 0432; Jeff, 2026-10-20: "show them, don't ask them"): the same post five ways, flicked
   like the look picker (.wsx-*). Without JavaScript every card shows with its own button; .tpk-js stacks them in one
   grid cell (the tallest sets the height, so nothing jumps) and one button picks the top card. */
.tpk{display:flex;flex-direction:column;gap:12px}
.tpk h1{margin:4px 0 0}
.tpk .sub{margin:0}
.tpk-err{margin:0;background:color-mix(in srgb,var(--sk-bad) 14%,var(--sk-card));border:1px solid color-mix(in srgb,var(--sk-bad) 40%,transparent);border-radius:14px;padding:10px 13px;font-size:14.5px}
.tpk-flick{max-width:440px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.tpk-stack{display:grid;gap:14px}
.tpk-card{background:var(--sk-card);border:1px solid var(--sk-line);border-radius:20px;padding:12px;display:grid;gap:10px;align-content:start;box-shadow:0 10px 26px -18px rgba(0,0,0,.4)}
.tpk-head{display:flex;align-items:center;gap:8px}
.tpk-name{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;font-weight:750;font-size:17px;line-height:1.2;padding:2px 4px}
.tpk-name small{font-size:12.5px;font-weight:500;color:var(--sk-ink-soft)}
.tpk-head button{display:none;min-width:44px;min-height:44px;font-size:22px;line-height:1;padding:0 12px}
.tpk-fb{background:#fff;color:#1c1e21;border-radius:14px;border:1px solid #e3e6e8;padding:12px 13px}
.tpk-who{display:flex;gap:9px;align-items:center;margin-bottom:8px}
.tpk-av{width:34px;height:34px;flex:0 0 34px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--sk-brand);color:#fff;font-weight:700;font-size:14px}
.tpk-av img,.tpk-av svg{width:100%;height:100%;object-fit:cover}
.tpk-who b{display:block;font-size:14.5px;line-height:1.2}
.tpk-who small{font-size:12px;color:#65676b}
.tpk-txt{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.45}
.tpk-one{margin:0}
.tpk-one button,.tpk-btns button,.tpk-skip button,.tpk-go{width:100%}
.tpk-btns{display:none}
/* Skip is a quiet text link under the card; the choice is the pinned button below. */
.tpk-skip{margin:0;text-align:center}
.tpk-skip button,.tpk-btns .tpk-dflt{width:auto;min-height:44px;background:none;border:0;box-shadow:none;padding:8px 12px;color:var(--sk-ink-soft);font-weight:600;font-size:15px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.tpk-js .tpk-stack{grid-template-areas:"card"}
.tpk-js .tpk-card{grid-area:card;visibility:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.tpk-js .tpk-card.is-top{visibility:visible}
.tpk-js .tpk-one{display:none}
.tpk-js .tpk-skip{display:none}   /* with JavaScript the default sits under the pinned button instead */
.tpk-btns .tpk-dflt{display:block;margin:2px auto 0;font-size:14px}
.tpk-js .tpk-head button{display:inline-grid;place-items:center}
/* THE CHOICE IS ALWAYS ON SCREEN: "This sounds like me" is pinned just above the tab bar (its height, about 70px, plus
   the iPhone's home bar), as a reel pins its button (REEL-PAGE-SOP). On a computer the tab bar is the side menu, so it
   pins to the bottom edge. The post inside the card scrolls on its own past a height that keeps the tone's name, the
   arrows and the start of the post above the fold on a small phone. */
.tpk-js .tpk-btns{display:block;margin:0;position:sticky;bottom:calc(78px + env(safe-area-inset-bottom));z-index:25;
  padding:10px 0 0;background:linear-gradient(to bottom,transparent,var(--sk-paper) 14px)}
.tpk-pick{min-height:52px;font-size:17px;font-weight:700;background:var(--sk-brand);color:#fff;border:0;border-radius:14px;box-shadow:0 10px 24px -12px rgba(0,0,0,.45)}
.tpk-js .tpk-fb{max-height:clamp(170px,calc(100dvh - 494px),460px);overflow-y:auto;overscroll-behavior:contain}
@media (min-width:900px){.tpk-js .tpk-btns{bottom:16px}.tpk-js .tpk-fb{max-height:clamp(220px,calc(100dvh - 380px),520px)}}

/* SOMETHING TO SHARK (social.mjs newsSection, 0442): today's news, one compact card at a time (Jeff, 2026-10-20: "i just
   dont want ppl scrolling a mile"). A thumbnail beside the headline, one line, two buttons, the caption folded. */
.sts{padding:14px}
/* Something to Shark in the found-card look (Jeff, 2026-10-22: "the same treatment to the card as the fb groups reddit and
   quora only with like a dark grey stroke and a "news" pill"): the line, a dark grey edge, the pill in the same grey.
   Lighter in dark mode so the edge still shows on a dark card. */
.card.sts{--news:#3F444C;border:1px solid var(--sk-line);border-left:3px solid var(--news)}
:root[data-theme=dark] .card.sts{--news:#8E95A0}
.sts .opp-top{margin-bottom:8px}
.opp-news{background:var(--news,#3F444C)}
:root[data-theme=dark] .opp-news{color:#17151D}
.sts[hidden]{display:none}
.sts-row{display:grid;grid-template-columns:84px 1fr;gap:12px;align-items:start}
.sts-row:not(:has(.sts-img)){grid-template-columns:1fr}
.sts-img{width:84px;height:84px;object-fit:cover;border-radius:10px;display:block}
.sts-meta{font-size:13px;color:var(--sk-ink-soft);margin:0 0 4px;letter-spacing:.02em;text-transform:uppercase}
.sts h3{font-size:17px;line-height:1.3;margin:0;overflow-wrap:anywhere}
.sts-sum{font-size:15px;line-height:1.45;color:var(--sk-ink-soft);margin:10px 0 0}
.sts-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 0}
.sts-btns .btn{margin:0;text-align:center;justify-content:center}
.sts-btns .btn:only-child{grid-column:1/-1}
.sts-cap{margin:10px 0 0;border:1px solid var(--sk-line-soft);border-radius:12px;background:var(--sk-tint)}
.sts-cap summary{list-style:none;cursor:pointer;padding:10px 12px;font-size:15px;display:flex;justify-content:space-between;gap:8px;align-items:center}
.sts-cap summary::-webkit-details-marker{display:none}
.sts-first{color:var(--sk-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sts-more{color:var(--sk-link);font-weight:700;white-space:nowrap}
.sts-cap[open] .sts-first{display:none}
.sts-cap[open] .sts-more{font-size:0}
.sts-cap[open] .sts-more::after{content:"Hide";font-size:15px}
.sts-cap .soc-cap{font-size:15px;line-height:1.45;margin:0 12px 10px;color:var(--sk-ink)}
.sts-in{padding:0 12px 12px;display:grid;gap:8px}
.sts-in .sub{font-size:14px;margin:0}
.sts-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:12px 0 0}
.sts-foot form{margin:0}
.sts-foot .linkish{font-size:14px;white-space:nowrap}
.sts-foot .sts-flag{color:var(--sk-ink-soft);font-weight:500}
.sts-done h3{margin:0 0 4px}
.sts-chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.sts-chips button{width:auto;padding:8px 14px;font-size:15px;min-height:40px}
.sts.sts-flagged > :not(.sts-done){display:none}
.sts [hidden]{display:none!important}
/* Personalize on a news card (social.mjs newsSection): the campaign card's button and shimmer, in the caption's box. */
.sts-pz{display:grid;gap:6px;justify-items:start}
.sts-pz-tag{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin:0;font-size:13.5px;color:var(--sk-ai)}
.sts-pz-tag .ai-spark{width:14px;height:14px}
.sts-pz-tag[hidden]{display:none}
/* On Social's post of the day the button sits in .dscript, whose p and button rules would stretch the tag (social.mjs pz) */
.dscript .sts-pz{margin:0 0 10px;justify-items:stretch}
.dscript .sts-pz-tag{margin:0!important}
.dscript .sts-pz-tag button{width:auto}
.sts-cap .soc-cap.sts-pz-on,.soc-post .soc-cap.sts-pz-on{background:linear-gradient(90deg,var(--sk-ink-soft) 0%,var(--sk-ai) 50%,var(--sk-ink-soft) 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sts-pz 1.4s linear infinite}
@keyframes sts-pz{to{background-position:-200% 0}}

/* HOT ACTION (app/hot.mjs; Jeff, 2026-10-21: "light mode ember dark mode full flame"). The one pick above the next action
   item: embers on a dark card in light mode, a red to amber flame in dark mode, so it is the hottest thing on either
   screen without fighting the brand-filled next item. Its own colour job, "do this now" (references/APP-COLOUR-SOP.md
   §Hot): only this card. Mockup https://claude.ai/artifact/XbStSVBamVfEcjnMkuc6Cj */
:root{--sk-hot:#FF5A1F;--sk-hot-deep:#B4260F;--sk-hot-amber:#FFB020;--sk-hot-coal:#1A0F0C;--sk-hot-red:#DC2626;--sk-hot-blood:#9F1D0F;--sk-hot-label:#B4260F;--sk-hot-orange:#F97316;--sk-hot-spark:#FFF3C4;--sk-hot-gold:#FFE08A}
:root[data-theme=dark]{--sk-hot-label:#FF8A5B}
.hk-wrap{display:block}
.hk-n{display:flex;align-items:center;gap:6px;margin:18px 2px 8px;font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 88,"wght" 700;font-size:13px;letter-spacing:.17em;text-transform:uppercase;color:var(--sk-hot-label)}
.hk-n i{font-style:normal;font-size:16px;letter-spacing:0;display:inline-block;transform-origin:50% 90%;animation:hk-flick 2.4s ease-in-out infinite}
@keyframes hk-flick{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(1.08) rotate(-4deg)}60%{transform:scale(.96) rotate(3deg)}}
.hk{position:relative;overflow:hidden;isolation:isolate;margin:0;border-radius:18px;padding:18px 16px 8px;color:#fff;
  border:1px solid color-mix(in srgb,var(--sk-hot) 35%,transparent);
  background:radial-gradient(90% 70% at 100% 110%,color-mix(in srgb,var(--sk-hot) 55%,transparent) 0%,color-mix(in srgb,var(--sk-hot-red) 25%,transparent) 35%,transparent 70%),
    radial-gradient(60% 50% at 0% 120%,color-mix(in srgb,var(--sk-hot-amber) 28%,transparent) 0%,transparent 70%),var(--sk-hot-coal);
  box-shadow:0 16px 32px -18px color-mix(in srgb,var(--sk-hot-red) 70%,transparent)}
.hk.hk-in{animation:hk-in .32s ease-out}
@keyframes hk-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hk-t{min-width:0;overflow-wrap:anywhere}   /* a long word or link wraps, never widens the card (2026-10-22) */
.hk-t b{display:block;font-size:17px;line-height:1.3}
.hk-t small{display:block;margin-top:5px;font-size:14px;line-height:1.45;color:rgba(255,255,255,.8)}
.hk-why{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.hk-why span{font-size:12.5px;padding:4px 9px;border-radius:99px;background:color-mix(in srgb,var(--sk-hot) 18%,transparent);color:#fff}
.hk .hk-go{display:block;margin-top:14px;text-align:center;padding:13px 14px;border-radius:12px;font-weight:700;font-size:15px;text-decoration:none;
  background:linear-gradient(180deg,var(--sk-hot-amber),var(--sk-hot));color:var(--sk-hot-coal)}
.hk .hk-next{display:block;width:100%;margin:4px 0 0;padding:10px;border:0;border-radius:10px;background:none;box-shadow:none;
  font:600 14px/1.2 inherit;color:rgba(255,255,255,.8);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.hk .hk-next:disabled{opacity:.5;cursor:default}
.hk-end{margin:0;padding:14px 16px;border-radius:14px;border:1px solid var(--sk-line);background:var(--sk-card);color:var(--sk-ink-soft);font-size:14px}
/* Dark mode: the full flame (a dark card on a dark screen disappears). */
:root[data-theme=dark] .hk{border-color:transparent;background:linear-gradient(160deg,var(--sk-hot-blood) 0%,var(--sk-hot-red) 45%,var(--sk-hot-orange) 100%);
  box-shadow:0 16px 32px -18px var(--sk-hot-blood)}
:root[data-theme=dark] .hk-t small,:root[data-theme=dark] .hk .hk-next{color:rgba(255,255,255,.88)}
:root[data-theme=dark] .hk-why span{background:rgba(255,255,255,.2)}
:root[data-theme=dark] .hk .hk-go{background:#fff;color:var(--sk-hot-blood)}
/* THE FIRE MOVES (Jeff, 2026-10-21: "animate the bg of that so it moves slightly kinda like fire? ... this crowd eats that
   up"). Two layers behind the words: ::before is the glow, three soft tongues that sway, swell and flicker; ::after is a
   few embers drifting up and fading. Only transform and opacity move, so the phone's graphics chip does it without
   repainting the card (no battery drain, no jank while scrolling). Off for anyone who turns motion down. */
.hk::before,.hk::after{content:"";position:absolute;pointer-events:none;z-index:-1}
.hk::before{inset:-25% -15% -35%;filter:blur(18px);transform-origin:50% 100%;
  background:radial-gradient(34% 52% at 82% 80%,color-mix(in srgb,var(--sk-hot-amber) 80%,transparent) 0%,transparent 70%),
    radial-gradient(30% 58% at 52% 84%,color-mix(in srgb,var(--sk-hot) 85%,transparent) 0%,transparent 72%),
    radial-gradient(36% 46% at 16% 82%,color-mix(in srgb,var(--sk-hot-red) 75%,transparent) 0%,transparent 70%);
  animation:hk-fire 3.4s ease-in-out infinite alternate,hk-flicker 1.7s steps(6,end) infinite}
.hk::after{left:0;right:0;bottom:-10px;height:70%;opacity:.9;
  background:radial-gradient(3px 3px at 22% 90%,var(--sk-hot-amber),transparent),radial-gradient(2px 2px at 48% 95%,var(--sk-hot-spark),transparent),
    radial-gradient(3px 3px at 71% 88%,var(--sk-hot-amber),transparent),radial-gradient(2px 2px at 86% 96%,var(--sk-hot),transparent),
    radial-gradient(2px 2px at 35% 98%,var(--sk-hot),transparent),radial-gradient(3px 3px at 60% 99%,var(--sk-hot-spark),transparent);
  -webkit-mask-image:linear-gradient(to top,#000 20%,transparent 95%);mask-image:linear-gradient(to top,#000 20%,transparent 95%);
  animation:hk-embers 4.5s linear infinite}
@keyframes hk-fire{0%{transform:translate3d(0,0,0) scale(1,1)}35%{transform:translate3d(-3%,-3%,0) scale(1.05,1.12)}
  70%{transform:translate3d(2%,-1%,0) scale(.97,1.04)}100%{transform:translate3d(-1%,-5%,0) scale(1.06,1.16)}}
@keyframes hk-flicker{0%{opacity:.82}20%{opacity:1}40%{opacity:.88}60%{opacity:.97}80%{opacity:.85}100%{opacity:.95}}
@keyframes hk-embers{0%{transform:translate3d(0,0,0);opacity:0}15%{opacity:.95}100%{transform:translate3d(-6px,-90px,0);opacity:0}}
/* Dark mode's full flame: the tongues are brighter (amber into pale gold) over the red, so the fire still reads. */
:root[data-theme=dark] .hk::before{background:radial-gradient(32% 55% at 80% 80%,color-mix(in srgb,var(--sk-hot-gold) 80%,transparent) 0%,transparent 70%),
    radial-gradient(28% 62% at 50% 86%,color-mix(in srgb,var(--sk-hot-amber) 90%,transparent) 0%,transparent 72%),
    radial-gradient(34% 48% at 18% 82%,color-mix(in srgb,var(--sk-hot-gold) 60%,transparent) 0%,transparent 70%)}
:root[data-theme=dark] .hk::after{opacity:.75}
@media (prefers-reduced-motion:reduce){.hk-n i,.hk.hk-in,.hk::before,.hk::after{animation:none}.hk::after{display:none}}

/* WHAT TO DO (app/do.mjs, 2026-10-22): where a lead's notification lands. The notification again, then the one thing to do. */
.do-card{gap:6px}
.do-h{font-size:22px;line-height:1.2;margin:0}
.do-b{margin:0;font-size:15px;color:var(--sk-ink)}
.do-when{margin:0}
.do-next p{margin:0 0 4px;font-size:15.5px;line-height:1.45}
.do-next .do-go{display:block;text-align:center;text-decoration:none;padding:13px 14px;border-radius:12px;font-weight:700;font-size:15px}

/* A GROUP TO JOIN (social.mjs groupsSection, 0459): a Facebook group every few days, the news card's bones (.sts-*) with
   Facebook's blue on the edge and the pill, as the Reddit and Quora cards carry theirs (Jeff, 2026-10-22). */
.grp{padding:14px;--fb:#0866FF;border:1px solid var(--sk-line);border-left:3px solid var(--fb)}
.grp[hidden]{display:none}
.grp h3{font-size:17px;line-height:1.3;margin:0}
.grp .opp-top{margin-bottom:8px}
.grp .sts-btns .btn:only-child{grid-column:auto}   /* the second button sits in its own form */
.opp-facebook{background:var(--fb,#0866FF)}
.grp-pat{margin:12px 0 0;padding:12px 14px;border-radius:12px;background:var(--sk-tint);border:1px solid var(--sk-line-soft);font-size:15px;line-height:1.45}
.grp-pat strong{display:block;margin-bottom:4px}
.grp-rule{font-size:13.5px;color:var(--sk-ink-soft);margin:10px 0 0}
/* After saving a town (social.mjs groupsSection): what happened, in the status colours. */
.grp-note{margin:0 0 12px;padding:11px 14px;border-radius:12px;background:var(--sk-ok-bg);color:var(--sk-ok);font-size:15px;line-height:1.45;font-weight:600}
.grp-note.grp-note-bad{background:var(--sk-bad-bg);color:var(--sk-bad)}
.grp-next{font-size:14px;color:var(--sk-ink-soft)}
.grp-town{margin:12px 0 0}
.grp-town .field{margin:0}
.grp.sts-flagged > :not(.sts-done){display:none}

/* CHECK A POST (check.mjs, 0476): the door on Social, the paste box, the flags numbered on the post, the fixed post.
   The Beta pill is the brand tint, not orange: orange means AI and the button beside it already carries that. */
/* The Beta pill (Check a post, the Shark Contact Sorter): one colour on every system, never the brand's (Jeff, 2026-10-26:
   "i want it to be clear - should be the same across all systems"): a solid orange on light, yellow on dark. Not red:
   red already means the Hot action and the unread dot. */
.pill.chk-beta{background:#e8590c;color:#fff;border-color:transparent;font-size:12px;vertical-align:middle;margin-left:6px}
:root[data-theme="dark"] .pill.chk-beta{background:#fcc419;color:#1a1300}
.chk-door h2{margin:0 0 4px}
.chk-door p:last-child{margin-bottom:0}
.chk-h{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.chk-form textarea{min-height:170px}
.chk-form .ai-btn{justify-self:start}
.chk-left{color:var(--sk-ink-soft)}
.chk-legal{margin:4px 0 0;font-size:13px;color:var(--sk-ink-soft)}
.chk-out{margin-top:12px}
.chk-out h2{margin:0 0 8px}
.chk-out h3{margin:16px 0 6px;font-size:16px}
.chk-post{white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 12px;padding:12px 14px;border-radius:10px;background:rgba(127,127,127,.08);line-height:1.55}
.chk-mark{background:var(--sk-warn-bg);color:inherit;border-radius:4px;padding:0 2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.chk-mark sup{font-weight:700;color:var(--sk-warn);margin-left:2px;font-size:11px}
.chk-list{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:14px}
.chk-list li{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start}
.chk-list p{margin:4px 0 0}
.chk-list q{display:block;margin-top:4px;color:var(--sk-ink-soft);font-style:italic}
.chk-n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--sk-warn-bg);color:var(--sk-warn);font-weight:700;font-size:14px}
.chk-kind{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:2px 0 0!important}
.pill.chk-law{font-size:11px;padding:1px 8px}
.chk-changes{margin:0 0 8px;padding-left:20px}
.chk-changes li{margin:3px 0}
.chk-clear h2{color:var(--sk-ok)}
.chk-report{margin-top:12px}
.chk-report summary{cursor:pointer;color:var(--sk-ink-soft);font-size:14px;padding:6px 0}
.chk-report details[open] summary{margin-bottom:8px}
.chk-report textarea{width:100%;margin-bottom:8px}
.chk-report small{display:block;margin-top:6px;color:var(--sk-ink-soft)}
/* Team resources (team-resources.mjs, 0503): Home's door under About you, in the brand's colour (orange is AI only), and
   the screen's sections. */
.kb-big.hm-teamres{margin:10px 0 0;position:relative}
.kb-big.hm-teamres .kb-i svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kb-big.hm-teamres::after{content:"";margin-left:auto;flex:none;width:9px;height:9px;border:solid var(--sk-ink-faint);border-width:2.2px 2.2px 0 0;transform:rotate(45deg);margin-right:6px}
.tres{margin-top:22px}
.tres-h{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sk-ink-faint);margin:0 0 10px}
.tres-rows{gap:8px}
.tres-note{margin-top:8px;font-size:13px}
.tres-step{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sk-brand-deep);margin:0 0 4px}
.tres-h.tres-h-big{position:static;background:none;padding:0;font-size:20px;letter-spacing:0;text-transform:none;color:inherit;margin:0 0 4px}
.tres-h.tres-h-big::after{content:none}
.tres-sub{margin:0 0 10px}
.tres-vid{display:flex;flex-direction:column;gap:2px}
.tres-vid-t{font-size:15px}
.tres-vid-s{font-size:13px;color:var(--sk-ink-faint)}
.tres-vid .qs-video{margin:6px 0 2px}
.qs-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.tres-foot{margin:30px 0 8px;text-align:center;font-weight:700;color:var(--sk-ink-faint)}
/* A team's board on Team resources (0524, Mike's One More board): folders as cover tiles, two across on a phone, images
   as a grid that opens full size, videos as a still with a play button that becomes the player when tapped, text cards
   that open. */
.tres-share{margin:16px 0 0}
.tres-board{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.tres-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:760px){.tres-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tres-tile{display:flex;flex-direction:column;border:1px solid var(--sk-line);border-radius:var(--sk-r);background:var(--sk-card);overflow:hidden;text-decoration:none;color:var(--sk-ink)}
.tres-tile-c{display:block;aspect-ratio:16/10;background:var(--sk-brand-tint) center/cover no-repeat}
.tres-tile-t{display:flex;gap:6px;align-items:flex-start;padding:10px 12px 12px;font-size:14px;line-height:1.3}
.tres-tile-t i{font-style:normal;flex:none}
.tres-imgs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.tres-im{padding:0;border:0;background:var(--sk-line-soft);border-radius:var(--sk-r-sm);overflow:hidden;aspect-ratio:1;cursor:zoom-in}
.tres-im img{width:100%;height:100%;object-fit:cover;display:block}
.tres-lb{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.92);display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;padding:16px;cursor:zoom-out}
.tres-lb img{max-width:100%;max-height:calc(100% - 70px);object-fit:contain}
.tres-lb-x{position:absolute;top:calc(env(safe-area-inset-top) + 10px);right:12px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;font-size:26px;line-height:1}
.tres-v{display:flex;flex-direction:column;gap:6px;padding:0;border:0;background:none;text-align:left;color:var(--sk-ink);font:inherit;cursor:pointer}
.tres-v-p{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:var(--sk-r);background:#111 center/cover no-repeat}
.tres-v-btn{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:rgba(0,0,0,.55);box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.tres-v-btn::after{content:"";position:absolute;left:23px;top:18px;border-left:17px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent}
.tres-v-t{font-size:14px;font-weight:600;line-height:1.35}
.tres-v-on{border-radius:var(--sk-r);overflow:hidden}
.tres-v-on iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tres-text{border:1px solid var(--sk-line);border-radius:var(--sk-r);background:var(--sk-card);padding:0 14px}
.tres-text summary{padding:13px 0;font-weight:700;cursor:pointer}
.tres-text div{padding:0 0 12px;font-size:14px;color:var(--sk-ink-soft)}
.tres-text p{margin:0 0 10px}
.tres-copy{margin-top:2px}
/* Your first week (team-resources.mjs firstWeek): a card at the top, a tick per step and the step's button. */
.tres-wk{border:1px solid var(--sk-line);border-radius:var(--sk-r);background:var(--sk-card);padding:0 14px 6px}
.tres-wk summary{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 0 4px;cursor:pointer;list-style:none}
.tres-wk summary::-webkit-details-marker{display:none}
.tres-wk-h{font-size:18px;font-weight:800}
.tres-wk-n{font-size:14px;color:var(--sk-ink-soft);font-weight:600;white-space:nowrap}
.tres-wk .tres-sub{margin:2px 0 0}
.tres-wk-list{list-style:none;margin:8px 0 0;padding:0}
.tres-wk-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--sk-line-soft)}
.tres-wk-row form{margin:0;flex:none}
.tres-wk-tick{position:relative;width:28px;height:28px;padding:0;border:2px solid var(--sk-line);border-radius:8px;background:var(--sk-card);cursor:pointer}
.tres-wk-tick::after{content:"";position:absolute;left:8px;top:3px;width:7px;height:13px;border:solid transparent;border-width:0 3px 3px 0;transform:rotate(45deg)}
.tres-wk-tick[aria-pressed="true"]{background:var(--sk-brand);border-color:var(--sk-brand)}
.tres-wk-tick[aria-pressed="true"]::after{border-color:#fff}
.tres-wk-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tres-wk-t b{font-size:15px;line-height:1.3}
.tres-wk-t small{font-size:13px;color:var(--sk-ink-faint);line-height:1.35}
.tres-wk-row.on .tres-wk-t b{color:var(--sk-ink-faint);text-decoration:line-through}
/* A ticked step drops to the bottom as one small grey line (Jeff, 2026-10-28: "lets hide or shrink the thing they tick off or move it to the bottom"). */
.tres-wk-row.on{padding:7px 0}
.tres-wk-row.on .tres-wk-tick{width:22px;height:22px;border-radius:6px}
.tres-wk-row.on .tres-wk-tick::after{left:5px;top:1px;width:6px;height:11px}
.tres-wk-row.on .tres-wk-t b{font-size:13px;font-weight:600}
.tres-wk-row.on .tres-wk-t small,.tres-wk-row.on .tres-wk-go{display:none}
.tres-wk-go{flex:none;padding:8px 12px;font-size:13px;white-space:nowrap}
.tres-wk-all{margin:6px 0 8px;font-weight:700;color:var(--sk-ink)}
.tres-lb-save{cursor:pointer}
/* Team resources in the brand's fill, like the next action item (Jeff, 2026-10-23: "can we make the team resources button
   gold? like this", pointing at the filled action item card): the brand gradient, white words, a white icon tile. */
.kb-big.hm-teamres{background:var(--sk-grad);border-color:transparent;color:#fff;box-shadow:0 0 0 3px rgba(var(--sk-brand-rgb),.18),0 10px 22px -10px rgba(var(--sk-brand-deep-rgb),.6)}
.kb-big.hm-teamres .kb-i{background:#fff;color:var(--sk-brand-deep)}
.kb-big.hm-teamres .kb-t small{color:rgba(255,255,255,.88)}
.kb-big.hm-teamres::after{border-color:#fff}
.kb-big.hm-teamres:hover{filter:brightness(1.06)}

/* Sort your contacts (sort.mjs, sort.js; 0511, 0513) and its box in action item 1 (home.mjs). Each bucket has its own
   colour (Jeff, 2026-10-25: "Maybe some color? Maybe some emojis?"), a deliberate exception to APP-COLOUR-SOP on this
   screen only: sorting is telling seven things apart at a glance. --k is the bucket's colour, --kt its tint. */
.srt [hidden]{display:none!important}
.srt-k-product{--k:#1f9d55;--kt:rgba(31,157,85,.12)}
.srt-k-opportunity{--k:#2563eb;--kt:rgba(37,99,235,.12)}
.srt-k-both{--k:#c2410c;--kt:rgba(194,65,12,.12)}
.srt-k-not_now{--k:#6b7280;--kt:rgba(107,114,128,.14)}
.srt-k-customer{--k:#0e7490;--kt:rgba(14,116,144,.12)}
.srt-k-team{--k:#7c3aed;--kt:rgba(124,58,237,.12)}
.srt-k-no_contact{--k:#b91c1c;--kt:rgba(185,28,28,.1)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .srt-k-product{--k:#4ade80;--kt:rgba(74,222,128,.14)}:root:not([data-theme="light"]) .srt-k-opportunity{--k:#7aa7ff;--kt:rgba(122,167,255,.15)}
  :root:not([data-theme="light"]) .srt-k-both{--k:#fb923c;--kt:rgba(251,146,60,.15)}:root:not([data-theme="light"]) .srt-k-not_now{--k:#a1a1aa;--kt:rgba(161,161,170,.15)}
  :root:not([data-theme="light"]) .srt-k-customer{--k:#22d3ee;--kt:rgba(34,211,238,.13)}:root:not([data-theme="light"]) .srt-k-team{--k:#b794ff;--kt:rgba(183,148,255,.15)}
  :root:not([data-theme="light"]) .srt-k-no_contact{--k:#f87171;--kt:rgba(248,113,113,.13)}}
:root[data-theme="dark"] .srt-k-product{--k:#4ade80;--kt:rgba(74,222,128,.14)}:root[data-theme="dark"] .srt-k-opportunity{--k:#7aa7ff;--kt:rgba(122,167,255,.15)}
:root[data-theme="dark"] .srt-k-both{--k:#fb923c;--kt:rgba(251,146,60,.15)}:root[data-theme="dark"] .srt-k-not_now{--k:#a1a1aa;--kt:rgba(161,161,170,.15)}
:root[data-theme="dark"] .srt-k-customer{--k:#22d3ee;--kt:rgba(34,211,238,.13)}:root[data-theme="dark"] .srt-k-team{--k:#b794ff;--kt:rgba(183,148,255,.15)}
:root[data-theme="dark"] .srt-k-no_contact{--k:#f87171;--kt:rgba(248,113,113,.13)}
/* the top */
.srt.decking .srt-intro{display:none}
.srt-counts{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:14px;color:var(--sk-ink-faint);margin:6px 0 14px}
.srt-counts span b{color:var(--k)}
.srt-counts a{margin-left:auto;font-weight:700}
.srt-h{position:static;background:none;padding:0;margin:10px 0 6px;font-size:20px;letter-spacing:0;text-transform:none;color:var(--sk-ink)}
.srt-h::after{content:none}
.srt-safe{font-size:14px;color:var(--sk-ink-faint);margin:0 0 12px}
.srt-safe.srt-warn{color:var(--sk-bad)}
/* the loader */
.srt-load{display:flex;flex-direction:column;gap:12px}
.srt-dev{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;border-radius:12px;background:var(--sk-card);border:1px solid var(--sk-line)}
.srt-dev button{all:unset;text-align:center;padding:9px;border-radius:9px;font-weight:700;cursor:pointer;color:var(--sk-ink-faint)}
.srt-dev button[aria-pressed="true"]{background:var(--sk-brand);color:#fff}
.srt-step{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:16px;background:var(--sk-card);border:1px solid var(--sk-line)}
.srt-step-n{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sk-brand-deep)}
.srt-step-t{margin:0;font-size:19px;line-height:1.3}
.srt-step-note{margin:0;font-size:14px;color:var(--sk-ink-faint)}
/* loading again after a sign out (it clears the unsorted pile on the phone): the sorting itself is kept */
.srt-back{margin:0;padding:10px 12px;border-radius:12px;background:var(--sk-card);border:1px solid var(--sk-line);font-size:14px;font-weight:600;color:var(--sk-ink)}
.srt-step-go{display:flex;justify-content:space-between;gap:8px}
.srt-step-go .btn{flex:1}
.srt-file{display:block;text-align:center;cursor:pointer}
.srt-art{display:grid;place-items:center;padding:6px 0}
.srt-art-here{font-size:42px;letter-spacing:.1em}
.srt-ph{width:170px;height:220px;border-radius:24px;border:3px solid var(--sk-ink);background:var(--sk-paper);padding:10px 10px;display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden}
.srt-ph-bar{width:50px;height:6px;border-radius:3px;background:var(--sk-ink);margin:0 auto 4px;opacity:.85}
.srt-ph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding-top:10px}
.srt-ph-grid span{aspect-ratio:1;border-radius:10px;background:var(--sk-line)}
.srt-ph-grid .srt-ph-app{background:var(--sk-card);display:grid;place-items:center;font-size:18px;outline:3px solid #e6ff1f;outline-offset:2px;position:relative}
.srt-ph-app small{position:absolute;bottom:-16px;font-size:9px;white-space:nowrap;color:var(--sk-ink)}
.srt-ph-top{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:700;min-height:22px}
.srt-ph-rows{display:flex;flex-direction:column;gap:6px}
.srt-ph-rows i{display:block;height:20px;border-radius:6px;background:var(--sk-line);font-style:normal;font-size:11px;padding:3px 6px}
.srt-ph-rows .srt-ph-hold{background:var(--sk-card);border:1px solid var(--sk-line);font-weight:700;height:auto}
.srt-ph-menu{position:absolute;left:24px;right:24px;top:92px;display:flex;flex-direction:column;gap:4px;padding:6px;border-radius:10px;background:var(--sk-card);box-shadow:0 8px 20px -8px rgba(0,0,0,.4);font-size:11px}
.srt-ph-menu span{padding:3px 6px}
.srt-ph-sheet{margin-top:auto;display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:12px;background:var(--sk-card);font-size:11px}
.srt-ph-sheet i{display:block;height:14px;border-radius:5px;background:var(--sk-line)}
.srt-ph-file{font-weight:700}
.srt-tap{display:inline-block;padding:3px 7px;border-radius:7px;font-size:11px;font-weight:800;color:#141021;background:#e6ff1f;box-shadow:0 0 0 3px rgba(230,255,31,.35)}
.srt-tap-row{display:block}
.srt-how{border:1px solid var(--sk-line);border-radius:12px;padding:10px 14px;background:var(--sk-card)}
.srt-how summary{font-weight:700;cursor:pointer}
.srt-add{display:flex;flex-direction:column;gap:8px;margin-top:10px}
/* the deck */
.srt-top{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;color:var(--sk-ink-faint);margin:0 0 6px}
.srt-top b{color:var(--sk-ink);font-size:18px}
.srt-top a,.srt-counts a{font-weight:700;font-size:14px;color:var(--sk-link)}
.srt-bar{height:6px;border-radius:3px;background:var(--sk-line);overflow:hidden;margin:0 0 12px}
.srt-bar i{display:block;height:100%;width:0;background:var(--sk-grad);transition:width .3s}
.srt-stage{position:relative;display:grid;place-items:center;margin:0 auto;max-width:420px;padding-top:12px}
/* the first time, a see-through hand drags the card each way and back (sort.js guide), until they touch it */
.srt-card.demo{transition:transform .55s cubic-bezier(.4,0,.2,1),border-color .15s,background .15s}
.srt-guide{position:absolute;left:50%;bottom:-22px;z-index:3;pointer-events:none;display:flex;align-items:center;gap:4px;transform:translate(-50%,0);transition:transform .55s cubic-bezier(.4,0,.2,1),opacity .25s}
.srt-finger{font-size:46px;line-height:1;opacity:.72;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));transition:transform .2s}
.srt-guide.press .srt-finger{transform:scale(.86)}
.srt-guide-t{padding:3px 10px;border-radius:999px;font-size:13px;font-weight:800;color:#fff;background:rgba(10,8,20,.6);white-space:nowrap}
.srt-card{position:relative;width:100%;max-width:340px;min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:18px 16px 16px;border-radius:22px;background:var(--sk-card);border:1px solid var(--sk-line);box-shadow:0 14px 30px -16px rgba(var(--sk-brand-deep-rgb),.5);
  touch-action:none;user-select:none;cursor:grab;transition:transform .2s ease,opacity .2s ease,border-color .15s;text-align:center}
.srt-card.drag{transition:border-color .15s;cursor:grabbing}
.srt-card b{font-size:22px;line-height:1.2;overflow-wrap:anywhere}
.srt-card small{color:var(--sk-ink-faint);font-size:15px}
.srt-q{margin:10px 0 0;font-size:15px;font-weight:600;color:var(--sk-ink)}
.srt-av{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:21px;color:#fff;background:var(--sk-grad);margin-bottom:4px}
.srt-stamp{position:absolute;top:-15px;left:50%;padding:5px 14px;border-radius:999px;font-weight:800;font-size:15px;white-space:nowrap;opacity:0;transform:translate(-50%,4px);transition:opacity .12s,transform .12s;color:#fff;background:var(--k)}
.srt-stamp.on{opacity:1;transform:translate(-50%,0)}
.srt-card.lean{border:2px solid var(--k);background:linear-gradient(var(--kt),var(--kt)),var(--sk-card)}
/* each sort is a little win (sort.js burst): a ring of the bucket's colour runs round the card, sparkles fly to its button */
@property --srt-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.srt-card.strobe{box-shadow:0 0 30px 2px var(--kt),0 0 0 2px var(--k)}
.srt-card.strobe::before{content:"";position:absolute;inset:-5px;border-radius:27px;padding:5px;pointer-events:none;
  background:conic-gradient(from var(--srt-a),transparent 0deg,transparent 200deg,var(--k) 290deg,#fff 330deg,var(--k) 350deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:srt-ring .38s linear}
@keyframes srt-ring{to{--srt-a:360deg}}
.srt-spark{position:fixed;z-index:60;pointer-events:none;width:22px;height:22px;margin:-11px 0 0 -11px;filter:drop-shadow(0 0 6px currentColor)}
.srt-spark svg{width:100%;height:100%}
.srt-spark path{fill:currentColor}
.srt-plus{position:fixed;z-index:61;pointer-events:none;font-weight:900;font-size:18px;text-shadow:0 1px 0 var(--sk-card)}
.srt-streak b{color:var(--sk-ink);font-size:15px}
.srt-cheer{position:fixed;z-index:62;left:50%;top:calc(env(safe-area-inset-top,0px) + 92px);transform:translate(-50%,-10px);opacity:0;transition:opacity .2s,transform .2s;
  padding:10px 18px;border-radius:999px;background:var(--sk-grad);color:#fff;font-weight:800;font-size:16px;box-shadow:0 12px 30px -10px rgba(var(--sk-brand-deep-rgb),.6);white-space:nowrap}
.srt-cheer.on{opacity:1;transform:translate(-50%,0)}
.srt-card.out-right{transform:translate(140%,0) rotate(14deg);opacity:0}
.srt-card.out-left{transform:translate(-140%,0) rotate(-14deg);opacity:0}
.srt-card.out-up{transform:translate(0,-120%);opacity:0}
.srt-card.out-down{transform:translate(0,120%);opacity:0}
.srt-card.out-fade{transform:scale(.92);opacity:0}
.srt-hint{text-align:center;font-size:13px;color:var(--sk-ink-faint);margin:12px 0 6px}
.srt-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.srt-b{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;border:2px solid var(--k);background:var(--kt);color:var(--sk-ink);font:inherit;font-weight:700;font-size:15px;cursor:pointer;min-width:0;text-align:left}
.srt-b.lit{background:var(--k);color:#fff}
.srt-arrow{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--k);color:#fff;font-size:15px}
.srt-bw{min-width:0;overflow-wrap:anywhere}
.srt-more{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.srt-chip{flex:1 1 auto;padding:8px 10px;border-radius:999px;border:1px solid var(--k);background:var(--kt);color:var(--sk-ink);font:inherit;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.srt-tools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;padding-bottom:4px}
.srt-err{color:var(--sk-bad);text-align:center;margin:8px 0 0}
.srt-done p{display:flex;flex-wrap:wrap;gap:8px}
.srt-done p.srt-done-n{font-weight:800;font-size:17px;color:var(--sk-ink)}
/* first time */
.srt-coach{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px max(16px,env(safe-area-inset-right,0px)) 20px max(16px,env(safe-area-inset-left,0px));background:rgba(10,8,20,.55)}
.srt-coach-in{max-width:360px;width:100%;display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:18px;background:var(--sk-card);color:var(--sk-ink);box-shadow:0 20px 50px -20px rgba(0,0,0,.6)}
.srt-coach-in b{font-size:19px}
.srt-coach-in p{margin:0;font-size:15px}
.srt-coach-in ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.srt-coach-in li{padding:8px 10px;border-radius:10px;background:var(--kt);border-left:4px solid var(--k);font-weight:700;font-size:15px}
/* the lists */
.srt-sec{border:1px solid var(--sk-line);border-left:5px solid var(--k);border-radius:12px;background:var(--sk-card);padding:10px 14px;margin:10px 0}
.srt-sec summary{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;cursor:pointer}
.srt-sec summary span{font-weight:700;color:var(--k)}
.srt-sec summary small{flex-basis:100%;color:var(--sk-ink-faint);font-size:13px}
.srt-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid var(--sk-line)}
.srt-row > span{display:flex;flex-direction:column;min-width:0}
.srt-row small{color:var(--sk-ink-faint);font-size:13px}
.srt-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.srt-mv{display:flex;gap:6px;align-items:center}
.srt-mv select{font:inherit;padding:6px 8px;border-radius:8px;border:1px solid var(--sk-line);background:var(--sk-card);color:var(--sk-ink)}
/* action item 1's box */
.srt-box{border:1px solid var(--sk-line);border-radius:14px;background:var(--sk-card);padding:12px 14px;margin:0 0 14px;display:flex;flex-direction:column;gap:8px}
.srt-box-l{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sk-brand-deep)}
.srt-box p{margin:0}
.srt-box-more{font-size:14px}
.srt-pick{display:flex;gap:10px;align-items:center;justify-content:space-between}
.srt-pick-n{display:flex;flex-direction:column;min-width:0}
.srt-pick-n small{color:var(--sk-ink-faint);font-size:13px}
.srt-pick.done .srt-pick-n b{text-decoration:line-through;color:var(--sk-ink-faint)}
.srt-pick-ok{font-size:13px;font-weight:700;color:var(--sk-ink-faint)}
.srt-pick-go{flex:none}

/* Before you start (terms.mjs, 0519): the four lines, the tick, one button. */
.tos{max-width:560px;display:grid;gap:14px}
.tos h1{margin:0}
.tos .sub{margin:0}
.tos-err{margin:0;background:color-mix(in srgb,var(--sk-bad) 14%,var(--sk-card));border:1px solid color-mix(in srgb,var(--sk-bad) 40%,transparent);border-radius:14px;padding:10px 13px;font-size:14.5px}
.tos-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tos-list li{background:var(--sk-card);border:1px solid var(--sk-line);border-radius:var(--sk-r);padding:13px 15px;display:grid;gap:3px}
.tos-list strong{font-size:16px;color:var(--sk-ink)}
.tos-list span{font-size:14.5px;color:var(--sk-ink-soft);line-height:1.45}
.tos-form{display:grid;gap:14px;margin:4px 0 0}
.tos-tick{display:flex;gap:11px;align-items:flex-start;font-size:15px;line-height:1.45;color:var(--sk-ink);cursor:pointer}
.tos-tick input{flex:none;margin-top:1px}

.tos-form button{width:100%;min-height:50px}
.tos-small{margin:0;text-align:center;font-size:13.5px;color:var(--sk-ink-faint)}
.tos-small a{color:var(--sk-ink-soft)}
/* Nothing past this screen opens until they agree, so its tabs would only bring them back here. */
body:has(.tos) nav.tabs{display:none}
.tos-read{margin:-4px 0 0 33px;font-size:14.5px;color:var(--sk-ink-faint)}
.tos-read a{color:var(--sk-link)}