/* Chemibloom's pages on kend.app (decision 0161): what kend.css, the studio's own stylesheet, does not draw. Help's
   questions, the privacy cards, tables, the code form, the invitation, the brand kit and the sheet to print, in the
   studio's tokens (--paper, --surface, --ink, --muted, --accent, --shadow ...) and the game's colour (--game). */
:root {
  --ok: #1d7a3e;
  --warn: #b2441b;
  /* the studio's redesign of 13 November 2026 took the soft shadow away: a card here wears a hairline in its place */
  --shadow: 0 0 0 1px var(--line);
}
@media (prefers-color-scheme: dark) {
  :root {
    --ok: #79d495;
    --warn: #ffa877;
  }
}

/* text pages */
.prose h3 {
  font-size: 21px;
  line-height: 1.2;
  margin: 30px 0 6px;
}
.prose .small {
  color: var(--muted);
  font-size: 15px;
}
.prose code {
  font-size: 0.9em;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--surface);
}
.prose blockquote {
  margin: 20px 0;
  padding: 2px 0 2px 18px;
  border-left: 3px solid color-mix(in srgb, var(--game) 70%, var(--ink));
}
.app-icon.xl {
  width: 112px;
  height: 112px;
  margin-top: 8px;
}

/* Help: each question a card that opens */
.faq {
  display: grid;
  gap: 12px;
  margin: 28px 0 8px;
}
.faq details {
  margin: 0;
  background: var(--surface);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  list-style: none;
  font: 700 18px/1.35 var(--display);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  flex: none;
  font: 500 24px/1 var(--text);
  color: var(--muted);
  transition: transform 0.2s;
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq details p {
  margin: -4px 22px 18px;
}

/* privacy for young players: where a card's data goes, and its four lines */
.prose .help-card {
  margin: 14px 0;
}
.prose .help-card h3 {
  font-size: 19px;
  margin: 0 0 10px;
}
.prose .flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}
.prose .flow li {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.flow li + li::before {
  content: '→';
  color: var(--muted);
  font-weight: 700;
}
.flow span {
  padding: 3px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--game) 22%, var(--surface));
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}
.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  margin: 0;
}
.facts dt {
  font-weight: 700;
  color: var(--ink);
}
.facts dd {
  margin: 0;
  min-width: 0;
  color: var(--ink-2);
}
.prose .change {
  margin-top: 14px;
  font-weight: 600;
  color: var(--ink);
}
.prose .tag {
  margin-top: 8px;
  color: var(--muted);
  font-size: 15px;
}

/* tables: the odds, the legal pages and the sheet */
.table {
  overflow-x: auto;
  margin: 20px 0;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.table table {
  border-collapse: collapse;
  width: 100%;
  font-size: 15px;
}
.table th,
.table td {
  text-align: left;
  vertical-align: top;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.table tbody tr:last-child td {
  border-bottom: 0;
}
.table th {
  font: 700 12px/1.3 var(--text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.table td {
  color: var(--ink-2);
}
.table .small {
  font-size: 13px;
}
.num {
  font-variant-numeric: tabular-nums;
}

/* the code page */
.form {
  display: grid;
  gap: 16px;
  max-width: 480px;
  margin: 26px 0;
  padding: 22px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.form label {
  display: grid;
  gap: 6px;
  font-weight: 600;
}
.form input {
  min-width: 0;
  padding: 12px 14px;
  font: 400 17px/1.3 var(--text);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.button {
  justify-self: start;
  min-height: 48px;
  padding: 0 28px;
  font: 600 17px/1 var(--text);
  color: #0f1115;
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.button:disabled {
  opacity: 0.6;
  cursor: default;
}
.button:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
.prose .said {
  margin: 0;
  font-weight: 600;
}
.prose .said.ok {
  color: var(--ok);
}
.prose .said.warn {
  color: var(--warn);
}
.prose .said.wait {
  color: var(--muted);
}

/* an invitation */
.steps {
  display: grid;
  gap: 10px;
  width: min(100%, 460px);
  margin: 0;
  padding-left: 1.3em;
  text-align: left;
  color: var(--ink-2);
}
.steps strong {
  color: var(--ink);
}
.gift {
  background: linear-gradient(transparent 60%, var(--mark) 60% 90%, transparent 90%);
}

/* the brand kit */
.art {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 18px 0;
}
.art img {
  width: 160px;
  height: 160px;
  border-radius: 22.5%;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.prose .colours {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  padding: 0;
  list-style: none;
}
.prose .colours li {
  margin: 0;
  padding: 10px 12px 12px;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--shadow);
  color: var(--ink);
}
.swatch {
  display: block;
  height: 48px;
  margin-bottom: 10px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(15, 17, 21, 0.1);
}
.prose .colours code {
  display: block;
  margin-top: 2px;
  padding: 0;
}

/* pages of wide tables: the odds and the sheet to print */
.prose.wide {
  max-width: 1040px;
}
.box {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--ink);
  border-radius: 5px;
}

@media (max-width: 520px) {
  .facts {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .facts dd {
    margin-bottom: 8px;
  }
}
@media print {
  :root {
    color-scheme: light;
    --paper: #fff;
    --surface: #fff;
    --ink: #000;
    --ink-2: #222;
    --muted: #444;
    --line: #999;
  }
  .skip,
  .site-header,
  .site-footer,
  .back,
  .no-print {
    display: none;
  }
  body {
    font-size: 11pt;
  }
  .prose,
  .prose.wide {
    width: auto;
    max-width: none;
    padding: 0;
  }
  .table {
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
  }
  a {
    text-decoration: none;
  }
}