/* Crosspollinate page kit. Plain CSS, custom properties, light and dark themes. */
:root {
  --cp-bg: #fbfaf7;
  --cp-fg: #1d2320;
  --cp-muted: #5b655f;
  --cp-line: #d9dcd6;
  --cp-accent: #2f6b4f;
  --cp-accent-fg: #ffffff;
  --cp-error: #a4332a;
  --cp-radius: 8px;
  color-scheme: light dark;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --cp-bg: #151917;
    --cp-fg: #e7ebe8;
    --cp-muted: #a3aea7;
    --cp-line: #36403b;
    --cp-accent: #7fc4a2;
    --cp-accent-fg: #0f1a14;
    --cp-error: #f08a80;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--cp-bg); color: var(--cp-fg); }
.cp-header { display: flex; gap: .5rem; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--cp-line); }
.cp-mark { width: 20px; height: 20px; background: url("/assets/mark.svg") center / contain no-repeat; }
.cp-operator { font-weight: 600; }
.cp-main { max-width: 40rem; margin: 2rem auto; padding: 0 1.25rem; }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
.cp-strip { padding: .75rem 1rem; border: 1px solid var(--cp-line); border-radius: var(--cp-radius); }
.cp-strip p { margin: 0; }
.cp-badges { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: .5rem 0 0; padding: 0; }
.cp-badge { font-size: .8rem; padding: .1rem .5rem; border: 1px solid var(--cp-accent); border-radius: 999px; color: var(--cp-accent); }
.cp-notice { padding: .75rem 1rem; border-left: 4px solid var(--cp-accent); background: color-mix(in srgb, var(--cp-accent) 8%, transparent); }
.cp-notice-error { border-left-color: var(--cp-error); background: color-mix(in srgb, var(--cp-error) 8%, transparent); }
form { display: grid; gap: 1rem; margin: 1.25rem 0; }
.cp-field { display: grid; gap: .25rem; }
.cp-field input { font: inherit; padding: .6rem .75rem; border: 1px solid var(--cp-line); border-radius: var(--cp-radius); background: transparent; color: inherit; }
.cp-check { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem 0; border-bottom: 1px solid var(--cp-line); }
.cp-check small { display: block; color: var(--cp-muted); }
.cp-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
button { font: inherit; min-height: 40px; padding: .5rem 1rem; border-radius: var(--cp-radius); border: 1px solid var(--cp-accent); background: var(--cp-accent); color: var(--cp-accent-fg); cursor: pointer; }
button.cp-secondary { background: transparent; color: var(--cp-fg); border-color: var(--cp-line); }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--cp-accent); outline-offset: 2px; }
.cp-divider { text-align: center; color: var(--cp-muted); margin: 1rem 0; }
.cp-fine { color: var(--cp-muted); font-size: .875rem; }
a { color: var(--cp-accent); }
h2 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
.cp-facts { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; }
.cp-facts dt { color: var(--cp-muted); }
.cp-facts dd { margin: 0; overflow-wrap: anywhere; }
.cp-code { padding: .75rem 1rem; border: 1px solid var(--cp-line); border-radius: var(--cp-radius); overflow-x: auto; font-size: .85rem; }
[hidden] { display: none !important; }