/* ==========================================================
   2. THE EDITOR  (what coaches use)
   ========================================================== */
body{background:#EEF1F3;font-family:'Barlow',system-ui,sans-serif;color:#16232E;-webkit-text-size-adjust:100%}
body.display-mode{background:#000;overflow:hidden}
body.display-mode #editor{display:none}
body.display-mode #tv{display:block}
#tv{display:none;position:fixed;inset:0;overflow:hidden}

/* The way out of full screen. It fades once the board is left alone, so a
   board on the gym wall does not carry a button across it, and comes back
   on any movement or tap. Never part of the exported image: the PNG is
   built from boardHtml(), not from this overlay. */
.tv-exit{position:fixed;top:20px;right:20px;z-index:2;display:flex;align-items:center;gap:9px;
  appearance:none;border:0;border-radius:9px;padding:11px 16px;cursor:pointer;
  font-family:'Barlow',sans-serif;font-weight:600;font-size:15px;
  background:rgba(20,30,40,.78);color:#fff;transition:opacity .45s}
.tv-exit span{font-size:12px;letter-spacing:.5px;padding:3px 7px;border-radius:5px;background:rgba(255,255,255,.16)}
.tv-exit:hover{background:rgba(44,62,76,.92)}
.tv-exit:focus-visible{outline:3px solid #FFC46B;outline-offset:2px}
body.tv-idle .tv-exit{opacity:0;pointer-events:none}
#editor{max-width:1180px;margin:0 auto;padding:0 16px 120px}

.bar{position:sticky;top:0;z-index:20;background:#16232E;color:#fff;margin:0 -16px 20px;padding:14px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.bar h1{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:26px;letter-spacing:1px;color:var(--cyan);margin-right:auto}
.btn{appearance:none;border:0;border-radius:8px;padding:12px 18px;font-family:'Barlow',sans-serif;font-weight:600;font-size:16px;cursor:pointer;background:#2C3E4C;color:#fff}
.btn:hover{background:#3A4F60}
.btn.primary{background:var(--cyan);color:var(--ink)}
.btn.primary:hover{background:#96F4F5}
.btn:disabled{opacity:.55;cursor:default}
.btn:focus-visible{outline:3px solid #FFC46B;outline-offset:2px}
.btn.tiny{padding:8px 13px;font-size:14px;background:#E3EBF0;color:#2C3E4C}
.btn.tiny:hover{background:#CFDCE4}
.btn.ghost{background:transparent;color:#8A6A6A;padding:10px 14px}
.btn.ghost:hover{background:#FBECEC;color:#A33}

.card{background:#fff;border-radius:14px;padding:20px;margin-bottom:18px;box-shadow:0 1px 3px rgba(20,35,50,.12)}
.card h2{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:22px;letter-spacing:1px;text-transform:uppercase;color:#5A6C7A;margin-bottom:14px}

label.fld{display:block;font-weight:600;font-size:15px;color:#5A6C7A;margin-bottom:6px}
input[type=text],input[type=time],select,textarea{width:100%;font-family:'Barlow',sans-serif;font-size:18px;color:#16232E;border:2px solid #D3DBE1;border-radius:9px;padding:12px 14px;background:#fff}
input:focus,select:focus,textarea:focus{outline:0;border-color:#33B8BB;box-shadow:0 0 0 3px rgba(121,237,239,.4)}
textarea{resize:vertical;min-height:150px;line-height:1.55;font-weight:500}

/* board tabs */
.boards{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.btab{appearance:none;border:2px solid #D3DBE1;background:#fff;color:#42586A;border-radius:999px;padding:10px 18px;font-family:'Barlow',sans-serif;font-weight:700;font-size:16px;cursor:pointer}
.btab:hover{border-color:#9FB6C4}
.btab.on{background:#16232E;border-color:#16232E;color:var(--cyan)}
.btab .n{font-weight:500;opacity:.7;margin-left:6px}
.btab:focus-visible{outline:3px solid #FFC46B;outline-offset:2px}

.warn{background:#FFF3E0;border:2px solid #F0B357;border-radius:11px;padding:14px 16px;margin-bottom:16px;font-weight:600;color:#7A4F0B;line-height:1.45}
.warn.hide{display:none}

.session{border:2px solid #DDE4E9;border-radius:14px;margin-bottom:16px;overflow:hidden;background:#fff}
.session.added{border-color:#33B8BB;box-shadow:0 0 0 4px rgba(121,237,239,.4)}
.session .head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:#F5F8FA;padding:14px 16px;border-bottom:2px solid #DDE4E9}
.session .head input[type=time]{width:auto;font-size:22px;font-weight:700;padding:9px 12px}
.session .head select{width:auto;font-size:14px;padding:8px 10px;font-weight:600}
.pill{background:#16232E;color:var(--cyan);border-radius:999px;padding:5px 14px;font-weight:600;font-size:14px;letter-spacing:.5px}
.head .spacer{margin-left:auto}

.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:16px}
.col{border:2px solid #E4EAEE;border-radius:11px;padding:12px;background:#FBFDFE}
.col.on{border-color:#BFE9EA;background:#F4FDFD}
.col .top{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.col select{padding:9px 10px;font-weight:700}
.count{font-size:14px;font-weight:600;color:#6B7C89;margin-top:7px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.count.over{color:#B3261E}
.tog{font-size:14px;font-weight:600;color:#3E6E8E;background:none;border:0;cursor:pointer;text-decoration:underline;padding:4px 0}
.hidden{display:none}

.preview-wrap{background:#16232E;border-radius:14px;padding:16px;position:sticky;top:74px}
.preview{position:relative;width:100%;overflow:hidden;border-radius:6px}
.preview .stage{position:absolute}
.pnote{font-size:14px;color:#9FB3C0;margin-top:10px;line-height:1.5}

.grid2{display:grid;grid-template-columns:1fr 420px;gap:22px;align-items:start}
@media (max-width:1000px){
  .grid2{grid-template-columns:1fr}
  .cols{grid-template-columns:1fr}
  .preview-wrap{position:static}
}
.note{font-size:15px;color:#5A6C7A;line-height:1.5;margin-top:10px}
details.card > summary{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:22px;letter-spacing:1px;text-transform:uppercase;color:#5A6C7A;cursor:pointer;list-style:none}
details.card > summary::-webkit-details-marker{display:none}
details.card > summary::before{content:"▸ ";color:#9FB3C0}
details.card[open] > summary::before{content:"▾ "}
details.card .setbody{margin-top:16px}
details.card .setbody label.fld{margin-top:16px}
details.card .setbody > label.fld:first-child{margin-top:0}