/* LeeGlee printable score sheets: US Letter portrait, B&W, built for pencil + phone photo. */
@page { size: letter; margin: 0.4in; }
* { box-sizing: border-box; }
html { background: #d8dbe0; }
body { margin: 0; font: 10px/1.2 "Helvetica Neue", Arial, sans-serif; color: #000; }
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 8px 16px; background: #14213d; color: #fff; font-size: 13px; }
.toolbar a { color: #fff; text-decoration: none; padding: 3px 10px; border-radius: 12px; }
.toolbar .modes a.on { background: #ffd23f; color: #14213d; font-weight: 700; }
.toolbar .brand { font-weight: 800; padding-left: 0; }
.toolbar .printbtn { margin-left: auto; font: 700 18px/1 inherit; font-family: inherit; padding: 10px 28px; border: 0; border-radius: 999px; background: #ffd23f; color: #14213d; cursor: pointer; box-shadow: 0 2px 0 rgba(0,0,0,.3); }
.toolbar .printbtn:hover { background: #ffe074; }
.toolbar .hint { margin-left: 0; opacity: .75; font-size: 12px; }
.page { padding: 16px; }
.sheet { position: relative; width: 7.7in; margin: 0 auto; background: #fff; padding: 0; box-shadow: 0 2px 12px rgba(0,0,0,.25); padding: .4in; width: 8.5in; }
.sheet { overflow: visible; }

/* corner marks help phone-photo cropping/deskew */
.cm { position: absolute; width: .22in; height: .22in; border: 0 solid #000; }
.cm.tl { top: .12in; left: .12in; border-top-width: 3px; border-left-width: 3px; }
.cm.tr { top: .12in; right: .12in; border-top-width: 3px; border-right-width: 3px; }
.cm.bl { bottom: .12in; left: .12in; border-bottom-width: 3px; border-left-width: 3px; }
.cm.br { bottom: .12in; right: .12in; border-bottom-width: 3px; border-right-width: 3px; }

.hdr { display: flex; align-items: stretch; border: 2px solid #000; height: .78in; }
.gid { width: 1.45in; border-right: 2px solid #000; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #000; color: #fff; }
.gid .gl { font-size: 11px; letter-spacing: .25em; font-weight: 700; }
.gid .gn { font-size: 34px; font-weight: 900; line-height: 1; }
.gid .blankline { display: inline-block; min-width: .9in; border-bottom: 2px solid #fff; text-align: left; }
.hmeta { flex: 1; display: flex; flex-direction: column; }
.hmeta .r1 { flex: 1; display: flex; border-bottom: 1px solid #000; }
.hmeta .r1:last-child { border-bottom: 0; }
.f { flex: 1; display: flex; align-items: flex-end; gap: 5px; padding: 0 6px 2px; border-right: 1px solid #000; min-width: 0; }
.f:last-child { border-right: 0; }
.f.s { flex: .55; }
.f label { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; padding-bottom: 1px; }
.f .v { flex: 1; font-size: 10.5px; font-weight: 700; min-height: 14px; border-bottom: 1px solid #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hmeta .r1 .f { align-items: flex-end; }
.brandmark { width: .95in; display: flex; flex-direction: column; align-items: center; justify-content: center; border-left: 1px solid #000; font-weight: 800; font-size: 12px; }
.brandmark b { font-weight: 900; }
.mline { font: 700 9px/1.1 "Courier New", monospace; letter-spacing: .06em; margin: 3px 0 4px; white-space: nowrap; overflow: hidden; }
.mline .tip { font: 400 8px "Helvetica Neue", Arial, sans-serif; letter-spacing: 0; }

h2 { margin: 5px 0 2px; font-size: 11px; letter-spacing: .12em; display: flex; align-items: baseline; gap: 8px; }
h2 small { font-size: 8px; font-weight: 400; letter-spacing: 0; }
h2 .final { margin-left: auto; font-family: "Courier New", monospace; font-size: 11px; letter-spacing: 0; }

table.grid { width: 100%; border-collapse: collapse; table-layout: fixed; border: 1.5px solid #000; }
.grid th, .grid td { border: 1px solid #000; padding: 0 3px; text-align: center; overflow: hidden; white-space: nowrap; }
.grid thead th { background: #e6e6e6; font-size: 8px; font-weight: 800; text-transform: uppercase; height: .2in; line-height: 1; white-space: normal; }
.grid th.rl { background: #e6e6e6; font-size: 9px; text-align: left; }
tr.hr td, tr.hr th { height: .29in; }
td.n { font-size: 9px; color: #444; background: #f2f2f2; }

/* rosters: two team boxes side by side, each split into two sub-columns of 10 handwriting rows */
.rosters { display: flex; gap: .12in; margin-top: 2px; }
.roster { flex: 1; min-width: 0; }
.rtitle { font-size: 10px; border: 1.5px solid #000; border-bottom: 0; padding: 2px 5px; background: #000; color: #fff; height: .2in; line-height: .16in; white-space: nowrap; overflow: hidden; }
.rtitle .ab { opacity: .8; }
.rtitle .fill { display: inline-block; }
.rcols { display: flex; }
.rcols .rt { flex: 1; border-top: 0; }
.rcols .rt + .rt { border-left-width: 0; }
.rt .c-no { width: .3in; } .rt .c-ps { width: .3in; }
tr.rr td { height: .225in; font-size: 9px; }
td.nm { text-align: left; }
.ty { font-family: "Courier New", Courier, monospace; font-weight: 700; font-size: 11px; }
.rt .ty { font-size: 9.5px; }
td.num { font-size: 11px; }
td.inf { text-align: left; font-size: 10px; }

.lower { display: flex; gap: .12in; align-items: flex-start; }
.pen { flex: 1.1; min-width: 0; }
.side { flex: .9; min-width: 0; }
.side table + h2 { margin-top: 6px; }

.sign { display: flex; border: 1.5px solid #000; margin-top: 6px; height: .34in; }
.sign .f { align-items: flex-end; padding-bottom: 3px; }
.sign .v { min-height: 16px; }

.mode-completed .hr td:not(.n), .mode-completed .rr td { /* typed look but still room to pen-correct */ }

/* hidden mode=handwritten: ink on top of the printed/blank sheet */
.hw { display: inline-block; white-space: nowrap; line-height: 1; height: 1em; position: relative; z-index: 1; text-shadow: 0 0 .5px currentColor; font-style: normal; }
.hw b { font-weight: inherit; }
.hw i.x { font-style: normal; display: inline-block; position: relative; margin-right: 2px; }
.hw i.x::after { content: ""; position: absolute; left: -12%; right: -12%; top: 52%; height: var(--w, 2px); background: currentColor; transform: rotate(-9deg); border-radius: 2px; }
.hand .grid td, .hand .grid th, .hand .v, .hand .rtitle { overflow: visible; text-overflow: clip; }
.hand td.nm { text-align: left; padding-left: 5px; }
.hand td.inf { text-align: left; padding-left: 4px; }
.hand .hwbox { display: inline-block; vertical-align: middle; height: .16in; min-width: 2.3in; background: #fff; margin-left: 4px; padding: 0 6px; }
.hand .hwbox .hw { top: -3px; }
.hand .rtitle { overflow: visible; }
.hand .v { display: flex; align-items: flex-end; height: auto; min-height: 14px; }
.hand .final.hfinal { margin-left: auto; font-weight: 700; display: flex; align-items: center; gap: 6px; height: 18px; }
.hand .sig { margin-left: 8px; }
.hand .f .v .hw { margin-bottom: 1px; }

/* bare=1: just the sheet, no chrome, white ground (for screenshots) */
body.bare, body.bare .page { background: #fff; padding: 0; }
html:has(body.bare) { background: #fff; }
body.bare .sheet { margin: 0; box-shadow: none; transform-origin: top left; }
body.bare .cm { display: block; }

@media print {
  html, body { background: #fff; }
  .toolbar { display: none; }
  .page { padding: 0; }
  .sheet { width: auto; box-shadow: none; padding: 0; margin: 0; }
  .cm { display: none; }  /* heavy header/footer boxes act as fiducials in print */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}