/* The editing surface only. Screenshot view and print retain the original styles. */
body:not(.preview){
  --navy:#172a3a;
  --green:#204d3e;
  --paper:#faf9f3;
  --ink:#192b32;
  --muted:#52635f;
  --line:#c4ccc3;
  --red:#913e32;
  color:var(--ink);
  background-color:#e9ede7;
  background-image:repeating-linear-gradient(90deg,transparent 0,transparent 23px,#172a3a06 23px,#172a3a06 24px);
}
body:not(.preview) .top{border-top:5px solid var(--navy);border-bottom:1px solid var(--navy);padding:18px 0 17px;gap:12px;margin-bottom:22px}
body:not(.preview) .eyebrow{color:var(--red);font-size:11px;letter-spacing:2px;font-weight:800}
body:not(.preview) h1{font-family:Georgia,'Times New Roman',serif;font-size:32px;font-weight:800;letter-spacing:-1.2px;color:var(--navy);margin-top:5px;line-height:1.1}
body:not(.preview) button{background:var(--paper);border:1px solid var(--navy);border-radius:2px;font-weight:600;color:var(--navy);transition:background-color .12s,border-color .12s}
body:not(.preview) button:hover:not(:disabled){background:#e0e7df}
body:not(.preview) button:disabled{opacity:.42}
body:not(.preview) button.primary{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:2px 2px 0 #172a3a30}
body:not(.preview) button.primary:hover{background:var(--green);border-color:var(--green)}
body:not(.preview) #rosterButton{white-space:nowrap}
body:not(.preview) #rosterCount{background:var(--navy);color:#fff;border-radius:0;font-variant-numeric:tabular-nums}
body:not(.preview) .game-fields label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--green);font-weight:800}
body:not(.preview) input{border:1px solid #82948a;border-radius:2px;background:var(--paper);color:var(--ink);font-size:14px;letter-spacing:normal;text-transform:none;min-height:40px}
body:not(.preview) .help{color:var(--muted);line-height:1.6;margin:14px 0 18px}
body:not(.preview) .lineup-card{background:var(--paper);border:1px solid var(--green);border-radius:2px;box-shadow:3px 3px 0 #172a3a1a}
body:not(.preview) .card-heading{background:var(--green);color:var(--paper);padding:19px 16px;border-bottom:3px solid #14392d}
body:not(.preview) .card-heading h2{font-family:Georgia,'Times New Roman',serif;font-size:23px;line-height:1.15;letter-spacing:-.4px}
body:not(.preview) .card-heading p{color:#e0e9df;font-size:12px;margin-top:7px}
body:not(.preview) #attendance{color:var(--paper);font-size:11px;font-variant-numeric:tabular-nums;border:1px solid #8daa99;padding:5px 7px;white-space:nowrap}
body:not(.preview) .grid-head{background:var(--navy);color:#fff;border-top:0;border-bottom:1px solid var(--navy);font-family:'Courier New',monospace;font-size:12px;letter-spacing:.25px;min-height:38px}
body:not(.preview) .player-row{border-bottom:1px solid var(--line);min-height:49px}
body:not(.preview) .player-row:nth-child(odd){background:#eef1e9}
body:not(.preview) .player-name{font-size:13px;font-weight:650;color:var(--navy)}
body:not(.preview) .jersey{color:var(--muted)}
body:not(.preview) .order{font-family:'Courier New',monospace;color:var(--muted);font-weight:700}
body:not(.preview) .grip{background:transparent;border:0;box-shadow:none;color:#66796e;border-radius:0;font-weight:400}
body:not(.preview) .grip:hover{background:#dbe3d8}
body:not(.preview) .pos select{border:1px solid #8ca295;border-radius:2px;background:#fffef9;color:var(--green);font-family:'Courier New',monospace;font-size:14px;font-weight:700;height:38px}
body:not(.preview) .pos select:hover{background:#e3ece2;border-color:var(--green)}
body:not(.preview) .pos select:has(option:checked[value='']){background:transparent;border-style:dashed;border-color:#a4afa5;color:#59675f}
body:not(.preview) .pos select:has(option:checked[value='B']){background:#f6e9df;border-color:#b88b79;color:#7e352c}
body:not(.preview) .pos option{background:#fffef9;color:var(--ink)}
body:not(.preview) :is(button,input,select):focus-visible{outline:3px solid #b84b36;outline-offset:2px}
body:not(.preview) .player-row.drop-target{box-shadow:inset 0 3px var(--red)}
body:not(.preview) .out{color:var(--muted);border-bottom:1px solid var(--line);padding:12px 14px}
body:not(.preview) .legend{color:var(--muted);font-size:11px;padding:11px 14px;background:#f1f3ec;line-height:1.5}
body:not(.preview) .checks{padding:12px 14px;border-left:3px solid var(--green);background:#faf9f3b3;color:#40554b;font-size:12px}
body:not(.preview) .checks strong{font-family:'Courier New',monospace;font-size:12px;letter-spacing:.4px;text-transform:uppercase;color:var(--green)}
body:not(.preview) .edit-footer{color:var(--muted);font-size:11px;line-height:1.5;padding-top:12px;border-top:1px solid #b9c4b9}
body:not(.preview) dialog{background:var(--paper);border:2px solid var(--navy);border-radius:2px;box-shadow:5px 5px 0 #172a3a25;color:var(--ink)}
body:not(.preview) dialog::backdrop{background:#10251ecc}
body:not(.preview) dialog h2{font-family:Georgia,'Times New Roman',serif;font-size:23px;color:var(--navy)}
body:not(.preview) dialog p{color:var(--muted);font-size:13px}
body:not(.preview) .roster-player{border-color:var(--line)}
body:not(.preview) input[type=checkbox]{accent-color:var(--green);min-height:0}
@media(max-width:560px){
  body:not(.preview) .top{padding:14px 0;margin-bottom:18px}
  body:not(.preview) h1{font-size:28px}
  body:not(.preview) .card-heading{padding:17px 12px}
  body:not(.preview) .card-heading h2{font-size:21px}
  body:not(.preview) .player-name{font-size:12px}
  body:not(.preview) .jersey{font-size:11px}
  body:not(.preview) .pos select{font-size:13px;height:40px}
  body:not(.preview) .legend{font-size:10px;padding:10px}
  body:not(.preview) #attendance{font-size:10px;padding:4px 5px}
}
@media(prefers-reduced-motion:reduce){body:not(.preview) button{transition:none}}