:root { font-family: system-ui, sans-serif; color: #20332e; background: #edf0eb; }
* { box-sizing: border-box; }
body { margin: 0; }
.toolbar { max-width: 1200px; margin: auto; padding: 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .18em; }
h1 { margin: 6px 0; font-size: 30px; letter-spacing: -.04em; }
h1 span { color: #758078; font-weight: 400; }
p { line-height: 1.55; }
.toolbar p { margin: 0; color: #5b6b63; }
button { border: 0; border-radius: 6px; padding: 14px 22px; background: #264f40; color: white; font: inherit; font-weight: 600; cursor: pointer; }
button:hover { background: #173b2e; }
button:focus-visible, input:focus-visible { outline: 3px solid #9c7433; outline-offset: 3px; }
main { max-width: 1200px; margin: auto; padding: 0 32px 48px; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: start; }
.settings { background: #fff; border: 1px solid #dce1da; padding: 24px; border-radius: 10px; }
h2 { font-size: 16px; margin: 0 0 10px; }
.settings p, .settings ol { font-size: 12px; color: #59675f; }
label { display: block; font-size: 12px; font-weight: 600; margin-top: 14px; }
input { width: 100%; min-width: 0; font: inherit; margin-top: 5px; border: 1px solid #cbd3cb; border-radius: 4px; padding: 9px; color: #20332e; background: white; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
input[type=file] { font-size: 11px; }
.secondary { background: #edf0eb; color: #20332e; padding: 8px 12px; font-size: 12px; margin-top: 8px; }
.secondary:hover { background: #dde5db; }
.print-help { border-top: 1px solid #dce1da; margin-top: 24px; padding-top: 20px; }
ol { padding-left: 18px; } li { margin: 8px 0; line-height: 1.5; }
.preview { min-width: 0; overflow-x: auto; padding: 0 8px 16px; }
.preview-note { font-size: 10px; letter-spacing: .1em; display: flex; justify-content: space-between; gap: 15px; margin: 0 0 14px; }
.sheet { width: 148mm; height: 210mm; padding: 8mm; background: white; color: black; margin: 0 auto 24px; box-shadow: 0 3px 18px #20332e17; font-family: Arial, sans-serif; display: flex; flex-direction: column; }
/* Mirror the extra 5 mm for hole punching when printing duplex. */
.sheet:nth-child(odd) { padding-left: 13mm; }
.sheet:nth-child(even) { padding-right: 13mm; }
.sheet-header { display: flex; align-items: center; justify-content: space-between; height: 15.1mm; gap: 4mm; margin-bottom: 2mm; }
.sheet-title { margin: 0; font-size: 14pt; line-height: 1.1; overflow-wrap: anywhere; }
.sheet-logo { max-width: 45mm; max-height: 15.1mm; object-fit: contain; }
.metadata { display: grid; grid-template-columns: minmax(0, 1fr) 12mm; grid-template-rows: repeat(4, auto); border: .25mm solid #222; margin-bottom: 2.5mm; }
.field-row { grid-column: 1; display: flex; min-height: 7mm; }
.field-row:nth-child(-n+2) { grid-column: 1 / -1; }
/* 66.5 mm from the content edge aligns with SVART in the middle move table.
   Subtract the metadata border to position its internal dividers. */
.metadata { --header-split: 66.25mm; }
.field-row:nth-child(2) { display: grid; grid-template-columns: calc(var(--header-split) - 38mm) 19mm 19mm minmax(0, 1fr); }
.field-row:nth-child(n+3) { display: grid; grid-template-columns: var(--header-split) minmax(0, 1fr) 15mm; }
.score-box { grid-column: 2; border-left: .2mm solid #666; padding: .7mm 1mm; font-size: 7pt; text-align: center; }
.score-top { grid-row: 3; border-top: .2mm solid #666; }
.score-bottom { grid-row: 4; border-top: .2mm solid #666; }
.field-row + .field-row { border-top: .2mm solid #666; }
.field { flex: 1; min-width: 0; padding: .7mm 1.4mm; overflow: hidden; }
.field + .field { border-left: .2mm solid #666; }
.field.wide { flex: 2.3; }
.field.small { flex: .6; }
.field-label { font-size: 6pt; display: block; line-height: 1.1; }
.field-value { font-size: 8pt; display: block; line-height: 1.2; min-height: 3mm; white-space: nowrap; }
.moves { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
table { border-collapse: collapse; width: 100%; table-layout: fixed; border: .3mm solid #222; font-size: 9pt; }
/* Let the next table supply the shared edge; hidden also suppresses cell borders. */
.moves > table:not(:last-child) { border-right-style: hidden; }
col.number { width: 6mm; }
th, td { border: .2mm solid #777; padding: 0; }
thead tr { height: 5mm; }
thead th { font-size: 7pt; font-weight: 600; }
.piece-circle { display: inline-block; width: 1.75mm; height: 1.75mm; border: .175mm solid #000; border-radius: 50%; vertical-align: middle; }
.piece-circle-black { background: #000; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
tbody tr { height: 6.4mm; }
tbody th { font-size: 7pt; font-weight: 400; color: #333; text-align: center; }
tbody tr:nth-child(5n) > * { border-bottom: .3mm solid #222; }
.result-row { display: flex; gap: 4mm; margin-top: 3mm; font-size: 7pt; }
.result-row span { flex: 1; border-bottom: .2mm solid #555; height: 6mm; }
.end-notes { display: grid; grid-template-columns: 42mm minmax(0, 1fr); gap: 5mm; margin-top: 3mm; break-inside: avoid; }
.chess-diagram { display: block; width: 42mm; height: 42mm; }
.chess-diagram text { font-family: Arial, sans-serif; font-size: 4px; fill: #333; }
.note-lines { display: grid; grid-template-rows: repeat(7, 6mm); }
.note-line { position: relative; border-bottom: .2mm solid #777; }
.note-line-signed { display: flex; align-items: flex-end; gap: 0; border-bottom: 0; }
.note-line-signed::before { content: ''; flex: 1; border-bottom: .2mm solid #777; }
.tiny-signature { font-size: 1pt; line-height: 1; white-space: nowrap; transform: translateY(50%); }
@media (max-width: 850px) { main { grid-template-columns: 1fr; padding: 0 16px 24px; gap: 24px; } .toolbar { padding: 24px 16px; flex-wrap: wrap; } .settings { max-width: 560px; width: 100%; margin: auto; } }
@page { size: A5 portrait; margin: 0; }
@media print {
  html, body { margin: 0; padding: 0; background: white; }
  .toolbar, .settings, .preview-note { display: none !important; }
  main, .preview, #pages { display: block; margin: 0; padding: 0; max-width: none; overflow: visible; }
  .sheet { margin: 0; box-shadow: none; break-inside: avoid; break-after: page; }
  .sheet:last-child { break-after: auto; }
}