/* ScoreChem one-page cheat sheet. Used by the site page and by the PDF / PNG build. */
.cs-sheet {
  --cs-navy: #14213D; --cs-violet: #6E3FA3; --cs-orange: #E2622A; --cs-teal: #0F766E;
  --cs-paper: #F5F6F1; --cs-line: #d9dccf; --cs-fs: 15px;
  font-family: "IBM Plex Sans", "Poppins", "Segoe UI", sans-serif;
  font-size: var(--cs-fs); line-height: 1.38; color: var(--cs-navy);
  background: #fff; border: 1.5px solid var(--cs-line); border-radius: 14px; overflow: hidden;
  max-width: 980px; margin: 0 auto;
}
.cs-sheet * { box-sizing: border-box; }
.cs-head { background: linear-gradient(120deg, #14213D 0%, #2a2f6b 70%, #6E3FA3 100%); color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .9em 1.2em; }
.cs-head h1 { font-family: "Literata", "Poppins", Georgia, serif; font-size: 1.55em; line-height: 1.15; margin: 0; font-weight: 700; color: #fff; }
.cs-head .cs-sub { margin: .25em 0 0; font-size: .82em; opacity: .85; }
.cs-badge { text-align: right; font-size: .78em; line-height: 1.3; }
.cs-badge b { display: block; font-size: 1.15em; letter-spacing: .02em; }
.cs-badge span { color: #ffb48f; font-weight: 600; }
.cs-body { column-count: 2; column-gap: .9em; padding: .85em .95em .4em; background: var(--cs-paper); }
.cs-card { break-inside: avoid; background: #fff; border: 1px solid var(--cs-line); border-left: 4px solid var(--c, var(--cs-navy));
  border-radius: 8px; padding: .5em .7em .55em; margin: 0 0 .7em; }
.cs-card.tone-navy { --c: var(--cs-navy); } .cs-card.tone-violet { --c: var(--cs-violet); }
.cs-card.tone-orange { --c: var(--cs-orange); } .cs-card.tone-teal { --c: var(--cs-teal); }
.cs-card h2 { font-family: "Literata", "Poppins", Georgia, serif; font-size: 1.02em; margin: 0 0 .3em; color: var(--c); font-weight: 700; }
.cs-row { display: flex; gap: .55em; margin: .22em 0; align-items: baseline; }
.cs-k { flex: 0 0 6.6em; font-weight: 600; font-size: .86em; color: var(--c); }
.cs-v { flex: 1; }
.cs-eq { margin: .15em 0; overflow-x: auto; overflow-y: hidden; }
.cs-eq .katex-display { margin: .25em 0; }
.cs-eq .katex { font-size: 1em; }
.cs-note { margin: .25em 0; font-size: .92em; }
.cs-trap { margin: .4em 0 .1em; padding: .35em .55em; background: #fff3ec; border: 1px solid #f3c4a8; border-radius: 6px; font-size: .92em; }
.cs-trap::before { content: "Trap · "; font-weight: 700; color: var(--cs-orange); }
.cs-table { width: 100%; border-collapse: collapse; margin: .3em 0; font-size: .92em; }
.cs-table th, .cs-table td { border: 1px solid var(--cs-line); padding: .18em .45em; text-align: left; }
.cs-table th { background: #eceefa; color: var(--cs-navy); font-weight: 600; }
.cs-ladder svg { width: 100%; height: auto; display: block; }
.cs-node3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; margin: .2em 0 .35em; }
.cs-node3 div { text-align: center; border: 1px solid var(--cs-line); border-radius: 6px; padding: .3em .2em; background: #faf7ff; }
.cs-node3 small { display: block; font-size: .78em; color: #55607a; }
.cs-node3 b { font-size: 1.05em; color: var(--cs-violet); }
.cs-traps { column-span: all; background: #fff; border: 1.5px dashed var(--cs-orange); border-radius: 8px; padding: .55em .8em .6em; margin: 0 0 .5em; }
.cs-traps h2 { margin: 0 0 .3em; font-size: 1.02em; color: var(--cs-orange); font-family: "Literata", "Poppins", Georgia, serif; }
.cs-traps ol { margin: 0; padding-left: 1.3em; columns: 2; column-gap: 1.2em; }
.cs-traps li { break-inside: avoid; margin: .12em 0; }
.cs-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4em 1em; padding: .55em 1.1em; background: var(--cs-navy); color: #e9ecf6; font-size: .8em; }
.cs-foot b { color: #fff; }
@media (max-width: 760px) { .cs-sheet { --cs-fs: 14px; } .cs-body { column-count: 1; } .cs-head { flex-direction: column; align-items: flex-start; } .cs-badge { text-align: left; } .cs-traps ol { columns: 1; } }

/* Fixed A4 layout for the PDF and the Telegram image */
.cs-sheet.is-print { --cs-fs: 10.7px; width: 794px; height: 1123px; max-width: none; border: 0; border-radius: 0; margin: 0;
  display: flex; flex-direction: column; }
.cs-sheet.is-print .cs-body { flex: 1; overflow: hidden; }
.cs-sheet.is-print .cs-head { padding: .75em 1.1em; }
.cs-sheet.is-print .cs-eq .katex { font-size: .98em; }
@page { size: A4; margin: 0; }

.cs-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin: 1rem auto 1.4rem; }

.cs-eq .katex-display { margin: .12em 0 !important; }
.cs-sheet.is-print .cs-card { margin-bottom: .55em; padding: .4em .65em .45em; }
.cs-sheet.is-print .cs-k { flex-basis: 6em; }
.cs-sheet.is-print .cs-table th, .cs-sheet.is-print .cs-table td { padding: .1em .4em; }
.cs-sheet.is-print .cs-body { padding-top: .6em; }
.cs-ladder svg { max-width: 340px; margin: 0 auto; }

/* Guard against site-wide prose rules (p max-width/colour, .katex wrapping, display padding) */
.cs-sheet .katex { white-space: nowrap; word-wrap: normal; }
.cs-sheet .cs-eq .katex-display { padding: 0 !important; margin: .12em 0 !important; }
.cs-sheet p { max-width: none; }
.cs-sheet .cs-head .cs-sub { color: #fff; opacity: .85; margin: .25em 0 0; }
.cs-sheet .cs-note { color: var(--cs-navy); margin: .25em 0; }
.cs-sheet .cs-head h1 { color: #fff; }