/* Pickle KOL. 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);
}

@media (max-width: 719px) {
  .foot-body { 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); } }

/* ------------------------------------------------------------ landing */
.kol-hero { padding-top: var(--pickle-section); }
.kol-hero .ex-actions { margin-top: var(--pickle-space-5); }
.kol-hero .ex-hint { margin-top: var(--pickle-space-4); }

.kol-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--pickle-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.kol-card { padding: var(--pickle-space-5); }
.kol-card p { margin: var(--pickle-space-2) 0 0; color: var(--pickle-muted); line-height: 1.6; }

.kol-steps { display: grid; gap: var(--pickle-space-4); margin: 0; padding: 0; list-style: none; }
.kol-steps li { color: var(--pickle-muted); line-height: 1.6; }
.kol-steps .n { margin-inline-end: var(--pickle-space-3); color: var(--pickle-mint); }
.kol-steps strong { color: var(--pickle-text); }

/* -------------------------------------------------------------- gates */
.kol-gate { padding: var(--pickle-space-5); }
.kol-gate > * + * { margin-top: var(--pickle-space-4); }
.kol-gate ul { margin: 0; padding-left: 1.1rem; color: var(--pickle-muted); }

/* --------------------------------------------------------------- stats */
.kol-stats { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pickle-space-4); padding: var(--pickle-space-5); }
.kol-avatar { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--pickle-line); }
.kol-stats dl { display: flex; flex-wrap: wrap; gap: var(--pickle-space-2) var(--pickle-space-5); margin: 0; }
.kol-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-stats dd { margin: 0; font-family: var(--pickle-font-mono); color: var(--pickle-text); }

.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 detail view and the gate. */
.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%;
}

/* ---------------------------------------------------------------- form */
.kol-fieldset { margin: 0 0 var(--pickle-space-5); padding: var(--pickle-space-5); border: 1px solid var(--pickle-line); border-radius: var(--pickle-radius); }
.kol-fieldset legend { padding: 0 var(--pickle-space-2); color: var(--pickle-text); font-weight: 600; }
.kol-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0 var(--pickle-space-4); }
.kol-rates { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: 0 var(--pickle-space-4); }
.kol-row { display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr) minmax(0, 8rem) auto; gap: var(--pickle-space-3); align-items: start; }
@media (max-width: 640px) { .kol-row { grid-template-columns: minmax(0, 1fr); } }

.kol-chips { display: flex; flex-wrap: wrap; gap: var(--pickle-space-2); margin: 0 0 var(--pickle-space-4); }
.ex-form .kol-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--pickle-space-2);
  margin: 0;
  padding: var(--pickle-space-2) var(--pickle-space-3);
  color: var(--pickle-muted);
  font-family: inherit;
  font-size: var(--pickle-text-sm);
  letter-spacing: normal;
  text-transform: none;
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius-pill);
  cursor: pointer;
}
.ex-form .kol-chip input { width: auto; min-height: 0; margin: 0; accent-color: var(--pickle-mint); }
.ex-form .kol-chip:has(input:checked) { color: var(--pickle-text); border-color: var(--pickle-mint-line); background: var(--pickle-mint-soft); }

/* ------------------------------------------------------- answers (read) */
.kol-answers { display: grid; gap: var(--pickle-space-4); }
.kol-answers a { overflow-wrap: anywhere; }

/* --------------------------------------------------------------- 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: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); }