/*
 * Kaibu theme for Listmonk's own public pages.
 *
 * Subscribing never reaches these: kaibu.app posts to its own Worker and
 * answers with its own page. What does reach them is the unsubscribe link in an
 * email, so they have to look like Kaibu rather than like a mail server.
 *
 * Paste into Listmonk: Settings, Appearance, Public, Custom CSS. Replace the
 * whole box. This file is the source of truth and is never appended to.
 *
 * Shape: the design's values as tokens, then the mapping from Listmonk's own
 * class names onto them, one entry per element. Listmonk styles its outline
 * button with two classes of its own, so the mapping block carries that
 * specificity throughout rather than each property being patched to outrank it
 * as it is discovered. A new Listmonk element gets a line here, not a new rule
 * further down the file.
 *
 * The values are `packages/design-tokens/src/kaibu.ts`, which the golden tests
 * hold to the Claude Design files.
 */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@800;900&family=Manrope:wght@400;500;600;700&display=swap");

:root {
  --kb-page: #fafaf7;
  --kb-surface: #ffffff;
  --kb-ink: #1a1e1e;
  --kb-body: #3c433e;
  --kb-line: #1a1e1e;
  --kb-hairline: #e2e4dd;
  --kb-field-line: #cdd2c8;
  --kb-field-placeholder: #8a918b;
  --kb-accent: #52af69;
  --kb-accent-ink: #10160f;
  --kb-danger: #b8452f;
  --kb-danger-ink: #ffffff;
  --kb-link: #1f6b3b;
  --kb-shadow: rgba(26, 30, 30, 0.2);
  /* The design's lift scale: rest 4, raised 7. */
  --kb-lift-rest: 0 4px 0 var(--kb-shadow);
  --kb-lift-raised: 0 7px 0 var(--kb-shadow);
  --kb-ring: 0 0 0 4px rgba(82, 175, 105, 0.28);
}

@media (prefers-color-scheme: dark) {
  :root {
    --kb-page: #141815;
    --kb-surface: #1e2320;
    --kb-ink: #fafaf7;
    --kb-body: #d3d8d2;
    --kb-line: #0d1a11;
    --kb-hairline: #2a312c;
    --kb-field-line: #3a423c;
    --kb-field-placeholder: #7c847d;
    --kb-link: #8fd3a3;
    --kb-danger: #e0765e;
    --kb-danger-ink: #1a1210;
    --kb-shadow: rgba(0, 0, 0, 0.45);
  }
}

body {
  background: var(--kb-page);
  color: var(--kb-ink);
  font-family: Manrope, system-ui, sans-serif;
  font-size: 15px;
  line-height: 23px;
}

body h1,
body h2,
body h3 {
  font-family: Nunito, sans-serif;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--kb-ink);
}
body h2 {
  font-size: 25px;
  line-height: 30px;
  margin: 12px 0 8px;
}
body p {
  color: var(--kb-body);
  text-wrap: pretty;
}
body a {
  color: var(--kb-link);
  font-weight: 600;
  text-underline-offset: 3px;
}

/* Card: the box the result pages on kaibu.app draw. Their `.wrap` carries the
   same white offset shadow as their inputs, so the lift is restated here. */
body .container.wrap {
  box-sizing: border-box;
  max-width: 420px;
  margin: 64px auto 24px;
  padding: 28px 26px 26px;
  background: var(--kb-surface);
  border: 3px solid var(--kb-line);
  border-radius: 22px;
  box-shadow: var(--kb-lift-rest);
  text-align: center;
}

/* Field: 48px box, 16px radius, 2px border, the design's ring on focus. */
body input[type="email"],
body input[type="text"],
body input[type="password"],
body input[type="url"],
body input[type="number"],
body input[type="search"],
body textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 2px solid var(--kb-field-line);
  border-radius: 16px;
  background: var(--kb-surface);
  color: var(--kb-ink);
  font-family: Manrope, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  outline: none;
  /* Theirs is `box-shadow: 2px 2px 0 #f3f3f3`, a white offset shadow that on
     the dark ground reads as a glow under the box. A resting field in the
     design has no shadow, and this block outranks theirs because it names the
     type the same way they do. */
  box-shadow: none;
}
body textarea {
  padding: 13px 14px;
}
body select {
  box-shadow: none;
}
body input[type="email"]:focus,
body input[type="text"]:focus,
body input[type="password"]:focus,
body input[type="url"]:focus,
body input[type="number"]:focus,
body input[type="search"]:focus,
body textarea:focus {
  border-color: var(--kb-ink);
  box-shadow: var(--kb-ring);
}
/* Chrome paints an autofilled field with its own fill and border, which wins
   over a background declaration. The inset shadow is the only way to state the
   fill, and the text colour has to be forced with it. */
body input:-webkit-autofill,
body input:-webkit-autofill:hover,
body input:-webkit-autofill:focus,
body input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--kb-ink);
  -webkit-box-shadow: 0 0 0 1000px var(--kb-surface) inset;
  box-shadow: 0 0 0 1000px var(--kb-surface) inset;
  border-color: var(--kb-field-line);
  caret-color: var(--kb-ink);
}
body input:-webkit-autofill:focus {
  border-color: var(--kb-ink);
  -webkit-box-shadow:
    0 0 0 1000px var(--kb-surface) inset,
    var(--kb-ring);
  box-shadow:
    0 0 0 1000px var(--kb-surface) inset,
    var(--kb-ring);
}

body ::placeholder {
  color: var(--kb-field-placeholder);
  opacity: 1;
}

body label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 19px;
  text-align: left;
  color: var(--kb-ink);
}

/* Button, accent tone: their primary action, whichever element it is drawn as. */
body .button,
body button[type="submit"],
body input[type="submit"] {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: 100%;
  min-height: 52px;
  margin-top: 4px;
  padding: 0 24px;
  border: 3px solid var(--kb-line);
  border-radius: 999px;
  background: var(--kb-accent);
  color: var(--kb-accent-ink);
  font-family: Nunito, sans-serif;
  font-weight: 800;
  font-size: 17px;
  line-height: 1;
  box-shadow: var(--kb-lift-rest);
  cursor: pointer;
}
/* Hover in the design is one lift step, not a change of colour. Theirs is
   `background: #333`, so every tone restates its own fill here or goes dark. */
body .button:hover,
body button[type="submit"]:hover,
body input[type="submit"]:hover {
  background: var(--kb-accent);
  color: var(--kb-accent-ink);
  box-shadow: var(--kb-lift-raised);
  transform: translateY(-3px);
}
body .button:active,
body button[type="submit"]:active,
body input[type="submit"]:active {
  box-shadow: none;
  transform: translateY(4px);
}

/* Button, secondary tone. Theirs is `.button.button-outline`, two classes, so
   this names three. Hover is restated because theirs inverts to near-black. */
body .button.button-outline,
body .button.button-outline:hover,
body input[type="submit"].button-outline:hover {
  border-color: var(--kb-line);
  background: var(--kb-surface);
  color: var(--kb-ink);
}

/* Button, destructive tone. The design draws the unsubscribe action this way
   (frame 06): it is the one action on these pages that takes something away,
   and accent would read as the same invitation as Subscribe. Listmonk gives
   that button an id, so nothing else picks the tone up by accident. */
body #btn-unsub,
body #btn-unsub:hover {
  background: var(--kb-danger);
  color: var(--kb-danger-ink);
}

body input[type="checkbox"],
body input[type="radio"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--kb-accent);
}

/* One object, three places: the blocklist row on the unsubscribe page, the
   export and wipe rows under it, and the list rows on the preferences page. */
body .unsub-form p:has(input[type="checkbox"]),
body .data-form .row,
body ul.lists li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  margin-bottom: 8px;
  border: 2px solid var(--kb-hairline);
  border-radius: 14px;
  text-align: left;
  font-size: 13px;
  line-height: 19px;
  color: var(--kb-body);
}
body .unsub-form p:has(input[type="checkbox"]) label,
body .data-form .row label,
body ul.lists li label {
  flex: 0 1 auto;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 23px;
  color: var(--kb-ink);
}
body .data-form .row br {
  display: none;
}
body ul.lists {
  list-style: none;
  padding: 0;
}
body ul.lists .description {
  flex: 1 1 100%;
  margin: 0;
  font-size: 13px;
  line-height: 19px;
}

/* Their logo out, the Kaibu mark in, drawn rather than fetched. */
body .header .logo img {
  display: none;
}
body .header .logo a {
  text-decoration: none;
}
body .header .logo a::after {
  content: "K";
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  margin: 0 auto 4px;
  border: 2px solid var(--kb-line);
  border-radius: 999px;
  background: var(--kb-accent);
  color: #1a1e1e;
  font-family: Nunito, sans-serif;
  font-weight: 900;
  font-size: 21px;
  line-height: 1;
}

/* Their honeypot. Hidden by their own stylesheet; keep it that way. */
body .nonce {
  display: none !important;
}

/* Their credit line. Removed rather than quietened: this is a Kaibu page as
   far as a subscriber is concerned, and listmonk is AGPL, which asks for the
   source to be available, not for a badge on the page. */
body footer.container {
  display: none;
}