/* Pickle Creators (the kol/ site). Only what shared-ui/components.css does not already dress:
   the notice strip, the auth menu, the footer and the captcha dialog are
   earn.css's own rules, copied; everything prefixed .kol- is this site's. */

/* ---- copied from earn.css: notice strip + auth menu ---- */
.kol-notice { padding-top: var(--pickle-space-4); }
.kol-notice .ex-banner { justify-content: space-between; }
.kol-notice .ex-banner span { flex: 1 1 auto; min-width: 0; }
.earn-auth { position: relative; display: flex; align-items: center; height: var(--pickle-nav-h); }
.earn-auth .ex-wmenu { top: calc(50% + 24px); }

/* ---- copied from earn.css: footer (.foot … .foot-run) ---- */
/* --------------------------------------------------------------- footer
 * The same footer the home page has, from web/public/css/home.css.
 */
.foot {
  padding: var(--pickle-section) var(--pickle-gutter) var(--pickle-space-6);
  border-top: 1px solid var(--pickle-line);
}

.foot-body,
.foot-disc,
.foot-run {
  width: min(100%, var(--pickle-content));
  margin-inline: auto;
}

.foot-run { text-align: center; }

.foot-body {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--pickle-space-6);
}

.foot-blurb {
  max-width: 34ch;
  margin-top: var(--pickle-space-4);
  color: var(--pickle-muted);
  line-height: 1.6;
}

.foot-h {
  margin: 0 0 var(--pickle-space-4);
  color: var(--pickle-subtle);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  font-weight: 400;
  letter-spacing: var(--pickle-tracking-caps);
  text-transform: uppercase;
}

.foot-apps ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pickle-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.foot-apps a { color: var(--pickle-muted); }
.foot-apps a:hover { color: var(--pickle-text); }

.foot-disc {
  margin-top: var(--pickle-space-7);
  padding-top: var(--pickle-space-5);
  color: var(--pickle-subtle);
  font-size: var(--pickle-text-xs);
  line-height: 1.7;
  border-top: 1px solid var(--pickle-line);
}

.foot-run {
  margin-top: var(--pickle-space-5);
  color: var(--pickle-subtle);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
}

/* kol's own: this site, then the other Pickle sites, beside the brand. */
.foot-body:has(> :nth-child(3)) { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }

@media (max-width: 719px) {
  .foot-body,
  .foot-body:has(> :nth-child(3)) { grid-template-columns: minmax(0, 1fr); }
}

/* ---- copied from earn.css: .captcha-gate … @keyframes captcha-gate-turn ---- */
/* The verification dialog (components/CaptchaGate). Always in the document, as
   Cloudflare's invisible widget needs a home, but clipped to nothing - never
   display:none, which would stop the widget running - until a check or a
   claim is under way. Then the site dims behind a small panel in the middle:
   a spinner while it works, Cloudflare's checkbox when it needs the person. */
.captcha-gate {
  position: fixed;
  inset: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  pointer-events: none;
}
.captcha-gate.on {
  z-index: 1000;
  display: grid;
  place-items: center;
  width: auto;
  height: auto;
  padding: var(--pickle-space-4, 16px);
  overflow: auto;
  clip-path: none;
  pointer-events: auto;
  background: rgb(5 6 6 / 72%);
  backdrop-filter: blur(3px);
}
.captcha-gate-panel {
  width: min(100%, 24rem);
  padding: var(--pickle-space-5, 24px);
  background: var(--pickle-surface-1);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
  box-shadow: 0 24px 64px rgb(0 0 0 / 55%);
  text-align: center;
}
.captcha-gate-say {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pickle-space-3, 12px);
  margin: 0;
  color: var(--pickle-text);
  font-size: var(--pickle-text-sm);
}
.captcha-gate.asking .captcha-gate-say { margin-block-end: var(--pickle-space-3, 12px); }
.captcha-gate-spin {
  flex: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--pickle-line);
  border-top-color: var(--pickle-mint);
  border-radius: 50%;
}
/* Empty while Cloudflare answers invisibly; the checkbox's height only when
   it is asked for, so the loading panel is not a box with a hole in it. */
.captcha-gate-box { display: flex; justify-content: center; }
.captcha-gate.asking .captcha-gate-box { min-height: 65px; }
.captcha-gate-close { margin-block-start: var(--pickle-space-3, 12px); }
@media (prefers-reduced-motion: no-preference) {
  .captcha-gate-spin { animation: captcha-gate-turn .8s linear infinite; }
  .captcha-gate.on .captcha-gate-panel { animation: ex-in-sm 220ms var(--pickle-ease, ease-out) both; }
}
@keyframes captcha-gate-turn { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------- icons
   components/Icons.jsx: one colour, sized by whoever holds them. */
.kol-ico { flex: none; width: 1em; height: 1em; }
.kol-btn-ico { width: 16px; height: 16px; }

/* ============================================================ landing */

/* The hero: the pitch on the left, an example post on the right. */
.kol-top { padding: var(--pickle-hero-top) 0 var(--pickle-space-7); }
.kol-hero {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: var(--pickle-space-7);
  align-items: center;
  margin-bottom: 0;
}
.kol-hero > div:first-child { min-width: 0; }
.kol-hero .ex-pill { margin-bottom: var(--pickle-space-5); }
.kol-hero h1 { max-width: 16ch; }
.kol-hero .ex-lede { max-width: 54ch; }
.kol-hero .ex-actions .ex-btn { min-height: 52px; padding-inline: 26px; }
.kol-hero .ex-actions { align-items: center; }
.kol-rule { max-width: 52ch; margin-top: var(--pickle-space-2); }
.ex-banner.kol-closed { margin: 0; }
.kol-muted { max-width: 58ch; color: var(--pickle-muted); font-size: var(--pickle-text-md); line-height: 1.7; }

/* The example post: an X thread's first post, a pickle hovering over it. */
.kol-example { width: min(100%, 30rem); min-width: 0; margin-inline: auto; }
.kol-example-label,
.kol-deal-who,
.kol-step-n {
  margin: 0 0 var(--pickle-space-3);
  color: var(--pickle-subtle);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  letter-spacing: var(--pickle-tracking-caps);
  text-transform: uppercase;
}
.kol-post-wrap { position: relative; }
.kol-post {
  position: relative;
  padding: var(--pickle-space-5);
  background: var(--pickle-surface-1);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
  box-shadow: 0 32px 80px rgb(0 0 0 / 50%);
}
.kol-post-mark {
  position: absolute;
  z-index: 2;
  top: -46px;
  right: -14px;
  width: 68px;
  height: auto;
  pointer-events: none;
  transform: rotate(12deg);
  filter: drop-shadow(0 12px 22px rgb(0 0 0 / 45%));
}
.kol-post-head { display: flex; gap: var(--pickle-space-3); align-items: center; }
.kol-post-avatar,
.kol-avatar-blank {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--pickle-mint-ink);
  font-family: var(--pickle-font-display);
  font-size: 1.15rem;
  font-weight: 700;
  background: linear-gradient(140deg, var(--pickle-mint-hi), var(--pickle-mint) 55%, #0a8f58);
  border-radius: 50%;
}
.kol-post-who { display: grid; flex: 1 1 auto; min-width: 0; margin: 0; line-height: 1.3; }
.kol-post-who b { font-family: var(--pickle-font-display); font-size: var(--pickle-text-md); font-weight: 600; }
.kol-post-who span { color: var(--pickle-subtle); font-size: var(--pickle-text-xs); }
.kol-post-x { width: 16px; height: 16px; color: var(--pickle-subtle); }
.kol-post-body { display: grid; gap: var(--pickle-space-3); margin: var(--pickle-space-4) 0; }
.kol-post-body p { color: var(--pickle-text); font-size: var(--pickle-text-md); line-height: 1.6; }
.kol-post-good,
.kol-post-bad { font-weight: 600; }
.kol-post-good { color: var(--pickle-accent-text); }
.kol-post-bad { color: var(--pickle-amber); }
.kol-post-foot {
  display: flex;
  gap: var(--pickle-space-3);
  justify-content: space-between;
  padding-top: var(--pickle-space-3);
  color: var(--pickle-subtle);
  font-size: var(--pickle-text-2xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  border-top: 1px solid var(--pickle-line);
}
.kol-post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pickle-space-2);
  margin: var(--pickle-space-4) 0 0;
  padding: 0;
  list-style: none;
}
.kol-post-tags li {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 6px 11px;
  color: var(--pickle-muted);
  font-size: var(--pickle-text-xs);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
}
.kol-post-tags .dot { width: 6px; height: 6px; background: var(--pickle-mint); border-radius: 50%; }
.kol-post-tags li.amber .dot { background: var(--pickle-amber); }

@media (prefers-reduced-motion: no-preference) {
  .kol-post-mark { animation: kol-bob 7s ease-in-out infinite; }
}
@keyframes kol-bob {
  0%, 100% { transform: translateY(0) rotate(12deg); }
  50% { transform: translateY(-10px) rotate(6deg); }
}

/* Live on testnet: a fixed label, then the apps running past. */
.kol-live {
  display: flex;
  align-items: center;
  margin: 0 0 var(--pickle-space-6);
  border-block: 1px solid var(--pickle-line);
}
.kol-live-label {
  display: inline-flex;
  flex: none;
  gap: 9px;
  align-items: center;
  align-self: stretch;
  padding: 0 var(--pickle-space-5) 0 var(--pickle-gutter);
  color: var(--pickle-accent-text);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  letter-spacing: var(--pickle-tracking-caps);
  text-transform: uppercase;
  white-space: nowrap;
  border-right: 1px solid var(--pickle-line);
}
.kol-live-label .dot { width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
.kol-live .ex-marquee { flex: 1 1 auto; min-width: 0; border-block: 0; }
.kol-marquee b { color: var(--pickle-text); font-weight: 400; }
.kol-marquee em { color: var(--pickle-subtle); font-style: normal; }
@media (prefers-reduced-motion: no-preference) {
  .kol-live-label .dot { animation: pickle-pulse 2.2s infinite; }
}

/* The deal: three columns, ours in the middle, tinted. */
.kol-deal {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--pickle-line);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
  overflow: clip;
}
.kol-deal > li { padding: 40px 32px; background: var(--pickle-surface-2); }
.kol-deal > li.on { background: linear-gradient(var(--pickle-mint-soft), var(--pickle-mint-soft)), var(--pickle-surface-2); }
.kol-deal > li.on .kol-deal-who { color: var(--pickle-accent-text); }
.kol-deal h3 { margin: 0 0 var(--pickle-space-5); font-size: 1.6rem; letter-spacing: -.025em; }
.kol-deal ul,
.kol-fit-list {
  display: grid;
  gap: var(--pickle-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.kol-deal ul li,
.kol-fit-list li {
  position: relative;
  padding-left: 22px;
  color: var(--pickle-muted);
  font-size: var(--pickle-text-md);
  line-height: 1.55;
}
.kol-deal ul li::before {
  content: "";
  position: absolute;
  top: .62em;
  left: 0;
  width: 10px;
  height: 2px;
  background: var(--pickle-mint);
}

/* Why trust comes first: the argument on the left, the rule it comes to on the right. */
.kol-trust {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--pickle-space-7);
  align-items: end;
}
.kol-trust .ex-sechead { margin-bottom: 0; }
.kol-trust-side { display: grid; gap: var(--pickle-space-5); }
.kol-quote {
  margin: 0;
  padding: var(--pickle-space-2) 0 var(--pickle-space-2) var(--pickle-space-5);
  border-left: 3px solid var(--pickle-mint);
}
.kol-quote p {
  font-family: var(--pickle-font-display);
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.025em;
  text-wrap: balance;
}

/* The pledge: two sides of four, ours tinted, signed underneath. */
.kol-pledge {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pickle-space-4);
}
.kol-pledge-side {
  padding: var(--pickle-space-6);
  background: var(--pickle-surface-1);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
}
.kol-pledge-side.us { background: linear-gradient(var(--pickle-mint-soft), var(--pickle-mint-soft)), var(--pickle-surface-1); border-color: var(--pickle-mint-line); }
.kol-pledge-side h3 {
  margin: 0 0 var(--pickle-space-4);
  color: var(--pickle-subtle);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-xs);
  font-weight: 400;
  letter-spacing: var(--pickle-tracking-caps);
  text-transform: uppercase;
}
.kol-pledge-side.us h3 { color: var(--pickle-accent-text); }
.kol-pledge-side ol { margin: 0; padding: 0; list-style: none; }
.kol-pledge-side li {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: var(--pickle-space-3);
  padding: var(--pickle-space-4) 0;
  border-top: 1px solid var(--pickle-line);
}
.kol-pledge-side li:last-child { padding-bottom: 0; }
.kol-pledge-n { padding-top: 4px; color: var(--pickle-accent-text); font-size: var(--pickle-text-xs); letter-spacing: .2em; }
.kol-pledge-side p { color: var(--pickle-muted); font-size: var(--pickle-text-md); line-height: 1.6; }
.kol-pledge-side strong {
  display: block;
  margin-bottom: 4px;
  color: var(--pickle-text);
  font-family: var(--pickle-font-display);
  font-size: var(--pickle-text-lg);
  font-weight: 600;
  letter-spacing: -.01em;
}
.kol-signed {
  margin-top: var(--pickle-space-5);
  padding-top: var(--pickle-space-4);
  color: var(--pickle-muted);
  font-size: var(--pickle-text-xs);
  letter-spacing: .06em;
  border-top: 1px dashed var(--pickle-line-strong);
}

/* Built with the community: four facts, two by two until there is room for a row. */
@media (min-width: 768px) {
  .ex-thesis.kol-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1220px) {
  .ex-thesis.kol-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ex-thesis.kol-four > div { padding: 40px 30px; }
  .ex-thesis.kol-four h3 { font-size: 1.5rem; }
}
.kol-facts .n { text-transform: uppercase; }

/* The brief: what we send, as it arrives on Telegram. */
.kol-brief-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: var(--pickle-space-7);
  align-items: center;
}
.kol-brief-grid .ex-sechead { margin-bottom: 0; }
.kol-brief-grid .ex-sechead .kol-muted { margin-top: var(--pickle-space-4); }
.kol-brief {
  min-width: 0;
  padding: var(--pickle-space-6);
  background: var(--pickle-surface-1);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
}
.kol-brief-head {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: var(--pickle-space-4);
  color: var(--pickle-subtle);
  font-size: var(--pickle-text-2xs);
  letter-spacing: var(--pickle-tracking-caps);
  text-transform: uppercase;
}
.kol-brief-ico { width: 14px; height: 14px; color: var(--pickle-accent-text); }
.kol-brief dl { margin: 0; }
.kol-brief dl > div {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: var(--pickle-space-4);
  padding: var(--pickle-space-4) 0;
  border-top: 1px solid var(--pickle-line);
}
.kol-brief dt { color: var(--pickle-accent-text); font-size: var(--pickle-text-sm); font-weight: 600; }
.kol-brief .bad dt { color: var(--pickle-amber); }
.kol-brief dd { margin: 0; color: var(--pickle-muted); font-size: var(--pickle-text-md); line-height: 1.6; }
.kol-brief .links dd { font-family: var(--pickle-font-mono); font-size: var(--pickle-text-xs); overflow-wrap: anywhere; }
.kol-brief-foot {
  padding-top: var(--pickle-space-4);
  color: var(--pickle-text);
  font-weight: 500;
  border-top: 1px solid var(--pickle-line);
}

/* What you make: one card per platform, then the terms under them. */
.kol-platforms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pickle-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.kol-platform {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--pickle-space-6);
  overflow: clip;
  transition: border-color var(--pickle-fast) var(--pickle-ease), background var(--pickle-fast) var(--pickle-ease);
}
.kol-platform:hover { background: var(--pickle-surface-2); border-color: var(--pickle-mint-line); }
.kol-platform::after {
  content: "";
  position: absolute;
  top: 0;
  left: var(--pickle-space-6);
  width: 44px;
  height: 2px;
  background: var(--pickle-mint);
}
.kol-platform-ico {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--pickle-space-5);
  color: var(--pickle-text);
  font-size: 24px;
  background: var(--pickle-surface-2);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
}
.kol-platform:hover .kol-platform-ico { color: var(--pickle-accent-text); border-color: var(--pickle-mint-line); }
.ex-panel.kol-platform h3 {
  display: block;
  margin: 0 0 var(--pickle-space-3);
  font-size: 1.6rem;
  letter-spacing: -.025em;
}
.kol-platform p { margin: 0; color: var(--pickle-muted); font-size: var(--pickle-text-md); line-height: 1.65; }
.kol-platform .ex-tags { margin-top: auto; padding-top: var(--pickle-space-5); }
.kol-terms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pickle-space-6);
  margin-top: var(--pickle-space-6);
  padding-top: var(--pickle-space-6);
  border-top: 1px solid var(--pickle-line);
}
.kol-terms h3 { margin: 0 0 var(--pickle-space-2); font-size: var(--pickle-text-lg); letter-spacing: -.01em; }
.kol-terms p { color: var(--pickle-muted); font-size: var(--pickle-text-md); line-height: 1.65; }
.kol-terms p.kol-terms-nets { margin-top: var(--pickle-space-2); color: var(--pickle-accent-text); font-size: var(--pickle-text-xs); line-height: 1.7; }

/* How it works: four steps along one rule, the first two - the creator's - in mint. */
.kol-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pickle-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.kol-steps li {
  padding-top: var(--pickle-space-5);
  border-top: 2px solid var(--pickle-line);
}
.kol-steps li.yours { border-top-color: var(--pickle-mint); }
.kol-steps li.yours .kol-step-n { color: var(--pickle-accent-text); }
.kol-step-n { display: block; margin-bottom: var(--pickle-space-4); letter-spacing: .2em; }
.kol-steps h3 { margin: 0 0 var(--pickle-space-3); font-size: 1.3rem; letter-spacing: -.02em; }
.kol-steps p { margin: 0; color: var(--pickle-muted); font-size: var(--pickle-text-md); line-height: 1.65; }

/* Who it is for, and who it is not. */
.kol-fit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pickle-space-4);
  margin-top: var(--pickle-space-7);
}
.kol-fit > div {
  padding: var(--pickle-space-6);
  background: var(--pickle-surface-1);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
}
.kol-fit h3 { margin: 0 0 var(--pickle-space-4); font-size: var(--pickle-text-xl); letter-spacing: -.02em; }
.kol-fit-list li::before {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--pickle-font-mono);
  font-weight: 600;
}
.kol-fit-list.yes li::before { content: "+"; color: var(--pickle-accent-text); }
.kol-fit-list.no li::before { content: "–"; color: var(--pickle-amber); }

/* Questions: the heading on the left, the answers opening on the right. */
.kol-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: var(--pickle-space-7);
  align-items: start;
}
.kol-faq { border-bottom: 1px solid var(--pickle-line); }
.kol-faq details { border-top: 1px solid var(--pickle-line); }
.kol-faq summary {
  position: relative;
  display: block;
  padding: var(--pickle-space-5) 44px var(--pickle-space-5) 0;
  font-family: var(--pickle-font-display);
  font-size: var(--pickle-text-lg);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.kol-faq summary::-webkit-details-marker { display: none; }
.kol-faq summary::before,
.kol-faq summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  width: 14px;
  height: 1.5px;
  background: var(--pickle-accent-text);
  transition: transform var(--pickle-base) var(--pickle-ease);
}
.kol-faq summary::after { transform: rotate(90deg); }
.kol-faq details[open] summary::before { transform: rotate(180deg); }
.kol-faq details[open] summary::after { transform: rotate(180deg); }
.kol-faq summary:hover { color: var(--pickle-accent-text); }
.kol-faq summary:focus-visible { outline: 2px solid var(--pickle-focus); outline-offset: 4px; }
.kol-faq details p {
  max-width: 62ch;
  margin: calc(var(--pickle-space-2) * -1) 0 var(--pickle-space-5);
  color: var(--pickle-muted);
  line-height: 1.7;
}
@media (prefers-reduced-motion: reduce) {
  .kol-faq summary::before,
  .kol-faq summary::after { transition: none; }
}

/* ---- landing, narrower screens ---- */
@media (max-width: 1023px) {
  .kol-hero { grid-template-columns: minmax(0, 1fr); }
  .kol-hero h1 { max-width: 18ch; }
  .kol-example { margin-top: var(--pickle-space-5); }
  .kol-trust,
  .kol-brief-grid { grid-template-columns: minmax(0, 1fr); gap: var(--pickle-space-6); }
  .kol-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--pickle-space-6); }
  .kol-faq-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

@media (max-width: 900px) {
  .kol-deal,
  .kol-platforms,
  .kol-terms,
  .kol-pledge,
  .kol-fit { grid-template-columns: minmax(0, 1fr); }
  .kol-terms { gap: var(--pickle-space-5); }
}

@media (max-width: 767px) {
  .kol-deal > li,
  .kol-pledge-side,
  .kol-fit > div,
  .kol-brief { padding: var(--pickle-space-5); }
}

@media (max-width: 560px) {
  .kol-hero .ex-pill { height: auto; min-height: 26px; padding-block: 5px; white-space: normal; }
  .kol-hero .ex-actions .ex-btn { flex: 1 1 100%; }
  .kol-post { padding: var(--pickle-space-4); }
  .kol-post-mark { top: -36px; right: -4px; width: 52px; }
  .kol-steps { grid-template-columns: minmax(0, 1fr); }
  .kol-brief dl > div { grid-template-columns: minmax(0, 1fr); gap: var(--pickle-space-1, 4px); }
  .kol-live-label { padding-right: var(--pickle-space-4); }
}


/* ======================================================= app pages */

/* The application, the status and the desk share one head: the faint grid,
   the kicker, a display headline and a lede. */
.kol-pagehead { margin-bottom: var(--pickle-space-6); }
.kol-pagehead h1 { margin: 0 0 var(--pickle-space-3); }
.kol-pagehead .ex-lede { margin: 0; }
.kol-gate-wrap { max-width: 60rem; }

/* ------------------------------------------------------------ gates */
.kol-gate { max-width: 44rem; padding: var(--pickle-space-6); }
.kol-gate > * + * { margin-top: var(--pickle-space-4); }
.kol-gate > p { margin-bottom: 0; color: var(--pickle-muted); line-height: 1.7; }
.kol-gate .ex-actions { margin-bottom: 0; padding-top: var(--pickle-space-2); }
.kol-gate > p.kol-gate-label {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin: 0;
  color: var(--pickle-accent-text);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  letter-spacing: var(--pickle-tracking-caps-wide);
  text-transform: uppercase;
}
.kol-gate-label::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: .6; }
.kol-gate-title {
  margin: 0;
  font-family: var(--pickle-font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.025em;
}
.kol-gate > p.kol-gate-note { color: var(--pickle-subtle); font-size: var(--pickle-text-xs); }
.kol-gate.warn { border-color: var(--pickle-amber-line); }
.kol-gate.warn > p.kol-gate-label { color: var(--pickle-amber); }
.kol-gate.bad { border-color: var(--pickle-rose-line); }
.kol-gate.bad > p.kol-gate-label { color: var(--pickle-rose); }
.kol-reasons { margin: 0; padding-left: 1.1rem; color: var(--pickle-text); line-height: 1.7; }
.kol-gate-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: var(--pickle-space-4);
  align-items: start;
}
.kol-gate-split .kol-gate { max-width: none; }
.kol-loading { max-width: 44rem; }

/* ---------------------------------------------------- the X card */
.kol-xcard { padding: var(--pickle-space-5); }
.kol-xcard-head { display: flex; gap: var(--pickle-space-3); align-items: center; }
.kol-avatar { flex: none; width: 52px; height: 52px; border: 1px solid var(--pickle-line); border-radius: 50%; }
.kol-avatar-blank { width: 52px; height: 52px; border: 0; }
.kol-xcard-who { flex: 1 1 auto; min-width: 0; }
.kol-xcard-handle {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pickle-space-2);
  align-items: center;
  margin: 0;
  font-family: var(--pickle-font-display);
  font-size: var(--pickle-text-lg);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.kol-xcard-name { margin: 2px 0 0; color: var(--pickle-muted); font-size: var(--pickle-text-xs); overflow-wrap: anywhere; }
.kol-xcard-mark { width: 18px; height: 18px; color: var(--pickle-subtle); }
.kol-xcard-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: var(--pickle-space-4) 0 0;
  background: var(--pickle-line);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
  overflow: clip;
}
.kol-xcard-stats div { padding: 12px 14px; background: var(--pickle-surface-1); }
.kol-xcard-stats dt {
  color: var(--pickle-subtle);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  letter-spacing: var(--pickle-tracking-caps);
  text-transform: uppercase;
}
.kol-xcard-stats dd {
  margin: 4px 0 0;
  color: var(--pickle-text);
  font-family: var(--pickle-font-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -.02em;
}
.kol-xcard-foot { margin: var(--pickle-space-3) 0 0; color: var(--pickle-subtle); font-size: var(--pickle-text-xs); }
.kol-xcard-empty { display: flex; gap: var(--pickle-space-3); align-items: center; margin: 0; color: var(--pickle-muted); }

.ex-pill.kol-pill-refused { color: var(--pickle-rose); border-color: var(--pickle-rose-line); }

/* shared-ui/components.css only dresses .ex-banner.ok and .ex-banner.bad;
   the desk and the closed-applications notice both need the amber warning
   variant, which no other Pickle site has needed yet. */
.ex-banner.warn {
  color: var(--pickle-amber);
  background: var(--pickle-amber-soft);
  border-color: var(--pickle-amber-line);
}

/* The small round avatar beside a handle in the staff table (AdminTable);
   .kol-avatar (above) is the larger one on the X card. */
.kol-avatar-sm {
  width: 24px;
  height: 24px;
  margin-inline-end: var(--pickle-space-2);
  vertical-align: middle;
  border: 1px solid var(--pickle-line);
  border-radius: 50%;
}

/* ======================================================== the form */

/* The X card and the checklist on the left, sticky; the five parts on the
   right. One column below 1024px, the checklist folded to a strip. */
.kol-apply {
  display: grid;
  grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
  gap: var(--pickle-space-6);
  align-items: start;
}
.kol-apply-side {
  position: sticky;
  top: calc(var(--pickle-nav-h) + var(--pickle-space-5));
  display: grid;
  gap: var(--pickle-space-4);
}

.kol-checklist { padding: var(--pickle-space-5); }
.kol-checklist-head {
  display: flex;
  justify-content: space-between;
  margin: 0 0 var(--pickle-space-3);
  color: var(--pickle-subtle);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  letter-spacing: var(--pickle-tracking-caps);
  text-transform: uppercase;
}
.kol-checklist-head .mono { color: var(--pickle-accent-text); }
.kol-meter { height: 3px; background: var(--pickle-line); border-radius: var(--pickle-radius); overflow: clip; }
.kol-meter i { display: block; height: 100%; background: var(--pickle-mint); transition: width var(--pickle-base) var(--pickle-ease); }
.kol-meter .w0 { width: 0; }
.kol-meter .w1 { width: 20%; }
.kol-meter .w2 { width: 40%; }
.kol-meter .w3 { width: 60%; }
.kol-meter .w4 { width: 80%; }
.kol-meter .w5 { width: 100%; }
.kol-checklist ol { margin: var(--pickle-space-4) 0 0; padding: 0; list-style: none; }
.kol-checklist li + li { border-top: 1px solid var(--pickle-line); }
.kol-checklist a {
  display: flex;
  gap: var(--pickle-space-3);
  align-items: center;
  min-height: 44px;
  color: var(--pickle-muted);
  font-size: var(--pickle-text-sm);
}
.kol-checklist a:hover { color: var(--pickle-text); }
.kol-checklist li.done a { color: var(--pickle-text); }
.kol-tick {
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--pickle-subtle);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  border: 1px solid var(--pickle-line);
  border-radius: 50%;
  transition: background var(--pickle-fast) var(--pickle-ease), border-color var(--pickle-fast) var(--pickle-ease);
}
.kol-tick .kol-ico { width: 13px; height: 13px; }
.kol-checklist li.done .kol-tick { color: var(--pickle-mint-ink); background: var(--pickle-mint); border-color: var(--pickle-mint); }

.kol-apply-form { display: grid; gap: var(--pickle-space-4); min-width: 0; }

/* A part: a fieldset dressed as a numbered card. The legend is floated so it
   sits inside the card like any heading instead of on its border. */
.ex-panel.kol-part {
  min-width: 0;
  margin: 0;
  padding: var(--pickle-space-6);
  transition: border-color var(--pickle-base) var(--pickle-ease);
}
.kol-part-head {
  float: left;
  display: flex;
  gap: var(--pickle-space-3);
  align-items: center;
  width: 100%;
  margin: 0 0 var(--pickle-space-2);
  padding: 0;
}
.kol-part-n {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--pickle-accent-text);
  font-size: var(--pickle-text-xs);
  border: 1px solid var(--pickle-mint-line);
  border-radius: var(--pickle-radius);
  transition: background var(--pickle-fast) var(--pickle-ease);
}
.kol-part-n .kol-ico { width: 18px; height: 18px; }
.kol-part.done .kol-part-n { color: var(--pickle-mint-ink); background: var(--pickle-mint); border-color: var(--pickle-mint); }
.kol-part-title {
  font-family: var(--pickle-font-display);
  font-size: var(--pickle-text-xl);
  font-weight: 600;
  letter-spacing: -.02em;
}
.ex-form .kol-part-help {
  clear: both;
  margin: 0 0 var(--pickle-space-5);
  padding-left: calc(36px + var(--pickle-space-3));
  color: var(--pickle-muted);
  font-size: var(--pickle-text-sm);
}

.kol-field + .kol-field { margin-top: var(--pickle-space-2); }
.ex-form .kol-sublabel {
  margin: 0 0 var(--pickle-space-3);
  color: var(--pickle-subtle);
  font-family: var(--pickle-font-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.kol-sublabel span,
.kol-opt { margin-left: 6px; color: var(--pickle-faint); }
.kol-req { margin-left: 6px; color: var(--pickle-accent-text); }
.ex-form .kol-count { margin-top: calc(var(--pickle-space-3) * -1); text-align: right; }

/* Field errors, compact: a rose line under the field it belongs to, not the
   framed error state shared-ui uses for a page. */
.kol-apply-form .ex-err {
  display: block;
  margin: calc(var(--pickle-space-2) * -1) 0 var(--pickle-space-4);
  padding: 0;
  color: var(--pickle-rose);
  font-size: var(--pickle-text-xs);
  background: none;
  border: 0;
}
.kol-apply-form .ex-err::before { content: none; }
.ex-form select[aria-invalid="true"] { border-color: var(--pickle-rose-line); }

/* Niches and languages: pill toggles. The checkbox covers the whole pill,
   invisible but focusable, so a click anywhere and the keyboard both work. */
.kol-chips { display: flex; flex-wrap: wrap; gap: var(--pickle-space-2); margin: 0 0 var(--pickle-space-5); }
.ex-form .kol-chip {
  position: relative;
  display: inline-flex;
  gap: 9px;
  align-items: center;
  min-height: 40px;
  margin: 0;
  padding: 0 14px;
  color: var(--pickle-muted);
  font-family: inherit;
  font-size: var(--pickle-text-sm);
  letter-spacing: normal;
  text-transform: none;
  background: var(--pickle-surface-2);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
  cursor: pointer;
  user-select: none;
  transition: color var(--pickle-fast) var(--pickle-ease), background var(--pickle-fast) var(--pickle-ease), border-color var(--pickle-fast) var(--pickle-ease);
}
.ex-form .kol-chip::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .7;
}
.ex-form .kol-chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
.ex-form .kol-chip:hover { color: var(--pickle-text); border-color: rgb(255 255 255 / 28%); }
.ex-form .kol-chip:has(input:checked) {
  color: var(--pickle-accent-text);
  background: var(--pickle-mint-soft);
  border-color: var(--pickle-mint-line);
}
.ex-form .kol-chip:has(input:checked)::before {
  width: 5px;
  height: 9px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  border-radius: 0;
  opacity: 1;
  transform: translateY(-1px) rotate(45deg);
}
.ex-form .kol-chip:has(input:focus-visible) { outline: 2px solid var(--pickle-focus); outline-offset: 2px; }

/* Rates: one tile per format, a $ before the price and its unit after. */
.kol-rates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
  gap: var(--pickle-space-3);
}
.kol-rate {
  padding: var(--pickle-space-4);
  background: var(--pickle-surface-2);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
  transition: border-color var(--pickle-fast) var(--pickle-ease), background var(--pickle-fast) var(--pickle-ease);
}
.kol-rate.on { background: var(--pickle-mint-soft); border-color: var(--pickle-mint-line); }
.ex-form .kol-rate label {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 1px var(--pickle-space-3);
  align-items: center;
  margin: 0 0 var(--pickle-space-3);
  color: var(--pickle-text);
  font-family: inherit;
  font-size: var(--pickle-text-sm);
  letter-spacing: normal;
  text-transform: none;
}
.kol-rate-ico {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 14px;
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
}
.kol-rate.on .kol-rate-ico { color: var(--pickle-accent-text); border-color: var(--pickle-mint-line); }
.kol-rate-name { font-weight: 600; }
.kol-rate-hint { color: var(--pickle-subtle); font-size: var(--pickle-text-xs); }
.kol-money {
  display: flex;
  align-items: center;
  min-height: 46px;
  background: var(--pickle-surface-input);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
  transition: border-color var(--pickle-fast) var(--pickle-ease);
}
.kol-money:focus-within { border-color: var(--pickle-mint); }
.kol-money:has(input[aria-invalid="true"]) { border-color: var(--pickle-rose-line); }
.kol-money-pre { padding-left: 14px; color: var(--pickle-accent-text); font-family: var(--pickle-font-mono); }
.ex-form .kol-money input {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  min-height: 44px;
  padding: 0 8px;
  font-size: var(--pickle-text-md);
  background: transparent;
  border: 0;
}
.kol-money-unit { padding-right: 12px; color: var(--pickle-subtle); font-size: var(--pickle-text-xs); white-space: nowrap; }
.kol-rate .ex-err { margin: var(--pickle-space-2) 0 0; }

/* Channels: YouTube, TikTok and Telegram always there, then any added. */
.kol-channels { display: grid; gap: var(--pickle-space-3); margin-bottom: var(--pickle-space-4); }
.kol-channel {
  padding: var(--pickle-space-4);
  background: var(--pickle-surface-2);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
  transition: border-color var(--pickle-fast) var(--pickle-ease);
}
.kol-channel.on { border-color: var(--pickle-mint-line); }
.kol-channel-row {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) minmax(0, 8.5rem) auto;
  gap: var(--pickle-space-3);
  align-items: end;
}
.ex-form .kol-channel-row p { margin: 0; }
.ex-form .kol-channel-kind {
  display: flex;
  gap: var(--pickle-space-3);
  align-items: center;
  min-height: 46px;
  font-weight: 600;
}
.kol-channel-ico {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 16px;
  background: var(--pickle-surface-1);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
}
.kol-channel.on .kol-channel-ico { color: var(--pickle-accent-text); border-color: var(--pickle-mint-line); }
.kol-channel .ex-err { margin: var(--pickle-space-3) 0 0; }

/* The verified YouTube channel (YouTubeVerify): a card like a channel row,
   mint once verified. The code is the one thing to copy, so it is the
   largest type in the card. Reused read-only in Answers (.kol-yt-read). */
.kol-yt {
  display: grid;
  gap: var(--pickle-space-4);
  margin-bottom: var(--pickle-space-5);
  padding: var(--pickle-space-4);
  background: var(--pickle-surface-2);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
}
.kol-yt.on { border-color: var(--pickle-mint-line); }
.kol-yt.on .kol-channel-ico { color: var(--pickle-accent-text); border-color: var(--pickle-mint-line); }
.kol-yt > *,
.ex-form .kol-yt p { margin: 0; }
.kol-yt-head { display: flex; flex-wrap: wrap; gap: var(--pickle-space-2) var(--pickle-space-3); align-items: center; }
.kol-yt-h {
  flex: 1 1 9rem;
  min-width: 0;
  margin: 0;
  font-size: var(--pickle-text-base);
  font-weight: 600;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.kol-yt-badge { gap: 6px; }
.kol-yt-badge .kol-ico { width: 11px; height: 11px; }
.kol-yt-lede { color: var(--pickle-muted); font-size: var(--pickle-text-sm); }
.kol-yt-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--pickle-space-3); align-items: end; }
.kol-yt-channel { display: flex; gap: var(--pickle-space-3); align-items: center; min-width: 0; }
.kol-yt-who { min-width: 0; }
.kol-yt-title { font-weight: 600; overflow-wrap: anywhere; }
.kol-yt-handle { color: var(--pickle-muted); font-size: var(--pickle-text-xs); overflow-wrap: anywhere; }
.kol-yt-code {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--pickle-space-1, 4px) var(--pickle-space-3);
  align-items: center;
  padding: var(--pickle-space-4);
  background: var(--pickle-surface-1);
  border: 1px dashed var(--pickle-mint-line);
  border-radius: var(--pickle-radius);
}
.kol-yt-code-label {
  grid-column: 1 / -1;
  color: var(--pickle-subtle);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  letter-spacing: var(--pickle-tracking-caps);
  text-transform: uppercase;
}
.kol-yt-code-value {
  color: var(--pickle-accent-text);
  font-size: clamp(1.25rem, 6.5vw, 1.75rem);
  font-weight: 600;
  letter-spacing: .06em;
  white-space: nowrap;
  user-select: all;
}
.kol-yt-steps { display: grid; gap: var(--pickle-space-2); padding-left: 1.4em; color: var(--pickle-muted); font-size: var(--pickle-text-sm); }
.kol-yt-steps li::marker { color: var(--pickle-accent-text); font-family: var(--pickle-font-mono); }
.kol-yt-stats { margin: 0; }
@media (min-width: 768px) { .kol-yt-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kol-yt-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pickle-space-2) var(--pickle-space-3);
  align-items: center;
  justify-content: space-between;
  color: var(--pickle-subtle);
  font-size: var(--pickle-text-xs);
}
.kol-yt-live:empty { display: none; }
.kol-yt-note { color: var(--pickle-subtle); font-size: var(--pickle-text-xs); }
.kol-apply-form .kol-yt-live .ex-err { margin: 0; }
.kol-yt-read { margin-bottom: 0; }
.kol-yt-read .kol-yt-h a { color: var(--pickle-text); }
.kol-yt-cell { color: var(--pickle-accent-text); }

.kol-posts { margin-bottom: var(--pickle-space-5); padding-bottom: var(--pickle-space-2); border-bottom: 1px solid var(--pickle-line); }
.kol-posts > .ex-err { margin-top: 0; }
.ex-form .kol-posts-hint { margin: calc(var(--pickle-space-2) * -1) 0 var(--pickle-space-4); }
.ex-form .kol-post p { display: flex; gap: var(--pickle-space-3); align-items: center; margin: 0 0 var(--pickle-space-3); }
.kol-post-n {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--pickle-subtle);
  font-size: var(--pickle-text-2xs);
  border: 1px solid var(--pickle-line);
  border-radius: 50%;
}
.kol-post .ex-err { margin: calc(var(--pickle-space-1, 4px) * -1) 0 var(--pickle-space-3) calc(30px + var(--pickle-space-3)); }

.kol-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0 var(--pickle-space-4); }
.kol-grid .kol-field + .kol-field { margin-top: 0; }
.kol-grid-pay { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); }

/* The send button: at the end of the form on a wide screen; on a narrow one a
   bar that follows the reader down, and stops where the form ends so it never
   sits on the last field. */
.kol-submitbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pickle-space-3) var(--pickle-space-4);
  align-items: center;
  justify-content: space-between;
  padding: var(--pickle-space-4) var(--pickle-space-5);
  background: var(--pickle-surface-1);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
}
.ex-form .kol-submit-note { margin: 0; color: var(--pickle-muted); font-size: var(--pickle-text-xs); }
.kol-submit-note .mono { color: var(--pickle-accent-text); }
.kol-submitbar .ex-btn { min-height: 50px; padding-inline: 28px; }

/* ------------------------------------------------------ status page */
.kol-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: var(--pickle-space-5);
  align-items: start;
}
.kol-status-main { display: grid; gap: var(--pickle-space-4); min-width: 0; }
.kol-status-side { position: sticky; top: calc(var(--pickle-nav-h) + var(--pickle-space-5)); }
.kol-status-card { padding: var(--pickle-space-6); }
.kol-status-card > :last-child { margin-bottom: 0; }
.kol-status-next { margin: 0 0 var(--pickle-space-4); color: var(--pickle-text); font-size: var(--pickle-text-md); line-height: 1.7; }
.ex-banner.kol-note { display: block; font-weight: 400; line-height: 1.6; }
.kol-note-label {
  display: block;
  margin-bottom: var(--pickle-space-1, 4px);
  color: var(--pickle-accent-text);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  letter-spacing: var(--pickle-tracking-caps);
  text-transform: uppercase;
}
.kol-h2 { margin: var(--pickle-space-4) 0 0; font-size: var(--pickle-text-xl); letter-spacing: -.02em; }

/* Sent, in review, decision: three dots on one line. */
.kol-timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 var(--pickle-space-5);
  padding: 0 0 var(--pickle-space-5);
  list-style: none;
  border-bottom: 1px solid var(--pickle-line);
}
.kol-timeline li { position: relative; display: grid; align-content: start; gap: 3px; justify-items: start; padding-right: var(--pickle-space-3); }
.kol-timeline li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 40px;
  right: 8px;
  height: 2px;
  background: var(--pickle-line);
}
.kol-timeline li.done:not(:last-child)::after { background: var(--pickle-mint); }
.kol-timeline-dot {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: var(--pickle-space-2);
  color: var(--pickle-subtle);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-xs);
  background: var(--pickle-surface-2);
  border: 1px solid var(--pickle-line);
  border-radius: 50%;
}
.kol-timeline-dot .kol-ico { width: 16px; height: 16px; }
.kol-timeline li.done .kol-timeline-dot { color: var(--pickle-mint-ink); background: var(--pickle-mint); border-color: var(--pickle-mint); }
.kol-timeline li.now .kol-timeline-dot {
  color: var(--pickle-amber);
  background: var(--pickle-amber-soft);
  border-color: var(--pickle-amber);
  box-shadow: 0 0 0 4px var(--pickle-amber-soft);
}
.kol-timeline li.no .kol-timeline-dot { color: var(--pickle-rose); background: var(--pickle-rose-soft); border-color: var(--pickle-rose-line); }
.kol-timeline-title { font-weight: 600; }
.kol-timeline li.todo .kol-timeline-title { color: var(--pickle-muted); }
.kol-timeline-note { color: var(--pickle-subtle); font-family: var(--pickle-font-mono); font-size: var(--pickle-text-2xs); }

/* ------------------------------------------------- answers (read) */
.kol-answers { display: grid; gap: var(--pickle-space-4); }
.kol-answers a { overflow-wrap: anywhere; }
.kol-box { padding: var(--pickle-space-5); }
.kol-box > * + * { margin-top: var(--pickle-space-4); }
.kol-rate-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: 1px;
  padding: 0;
  list-style: none;
  background: var(--pickle-line);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
  overflow: clip;
}
.kol-rate-list li { display: grid; gap: 3px; padding: 14px; background: var(--pickle-surface-1); }
.kol-rate-list-name { display: flex; gap: 8px; align-items: center; color: var(--pickle-muted); font-size: var(--pickle-text-xs); }
.kol-rate-list b { font-family: var(--pickle-font-display); font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; }
.kol-rate-list-unit { color: var(--pickle-subtle); font-size: var(--pickle-text-2xs); }
.kol-refs { margin-bottom: 0; padding: 0; list-style: none; }
.kol-refs li {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) auto;
  gap: var(--pickle-space-3);
  align-items: center;
  padding: var(--pickle-space-3) 0;
  border-top: 1px solid var(--pickle-line);
}
.kol-refs li:first-child { border-top: 0; padding-top: 0; }
.kol-refs-kind { display: flex; gap: 8px; align-items: center; color: var(--pickle-muted); font-size: var(--pickle-text-sm); }
.kol-refs a { font-family: var(--pickle-font-mono); font-size: var(--pickle-text-xs); }
.kol-refs-aud { color: var(--pickle-muted); font-size: var(--pickle-text-xs); }
.kol-refs-none { color: var(--pickle-subtle); }

/* --------------------------------------------------------------- desk */
.kol-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: 0 var(--pickle-space-3); align-items: end; }
.kol-table-row { cursor: pointer; }
.kol-table-row td.mono { white-space: nowrap; }
.kol-table-row:hover td { background: var(--pickle-surface-hover); }
.kol-table-row:focus-visible { outline: 2px solid var(--pickle-focus); outline-offset: -2px; }
.kol-detail { display: grid; gap: var(--pickle-space-5); }
.kol-actions { display: flex; flex-wrap: wrap; gap: var(--pickle-space-2); }
.kol-history { margin: 0; padding: 0; list-style: none; font-size: var(--pickle-text-xs); color: var(--pickle-muted); }
.kol-history li + li { margin-top: var(--pickle-space-2); }

/* ========================================================= responsive */
@media (max-width: 1023px) {
  .kol-apply,
  .kol-status { grid-template-columns: minmax(0, 1fr); }
  .kol-apply-side,
  .kol-status-side { position: static; }
  .kol-apply-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .kol-status-side { order: -1; }

  /* The checklist becomes a strip of five ticks under its meter. */
  .kol-checklist ol { display: flex; flex-wrap: wrap; gap: var(--pickle-space-2) var(--pickle-space-4); }
  .kol-checklist li + li { border-top: 0; }
  .kol-checklist a { min-height: 36px; font-size: var(--pickle-text-xs); }

  .kol-submitbar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: rgb(20 20 22 / 94%);
    backdrop-filter: blur(10px);
  }
  html:has(.kol-submitbar) { scroll-padding-bottom: 104px; }
}

@media (max-width: 900px) {
  .kol-gate-split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .kol-apply-side { grid-template-columns: minmax(0, 1fr); }
  .ex-panel.kol-part { padding: var(--pickle-space-5); }
  .ex-form .kol-part-help { padding-left: 0; }
  .kol-channel-row { grid-template-columns: minmax(0, 1fr) auto; }
  .kol-channel-kind,
  .kol-channel-pick,
  .kol-channel-url,
  .kol-channel-aud:last-child { grid-column: 1 / -1; }
  .kol-grid-pay { grid-template-columns: minmax(0, 1fr); }
  .kol-yt-link { grid-template-columns: minmax(0, 1fr); }
  .kol-yt-link .ex-btn { width: 100%; }
  .kol-refs li { grid-template-columns: minmax(0, 1fr); gap: var(--pickle-space-1, 4px); }
  .kol-submitbar { padding: var(--pickle-space-3) var(--pickle-space-4); }
  .kol-submitbar .ex-btn { flex: 1 1 12rem; }
  .kol-status-card { padding: var(--pickle-space-5); }
}

@media (max-width: 520px) {
  .kol-timeline-note { font-size: .6rem; }
  .kol-timeline li:not(:last-child)::after { left: 38px; right: 4px; }
  /* The YouTube code on its own line, whole: split at its hyphen it reads as two. */
  .kol-yt-code { grid-template-columns: minmax(0, 1fr); }
  .kol-yt-code .ex-btn { justify-self: start; }
}