/* J8 site styles. The Coach Portal part is carried over from the claude.ai Coach Portal page, so it looks the same to coaches. Black and white only. */
/* Layout: one narrow column that works on a phone. A sign-in screen, then a hub with three numbered steps (attendance, reports, weekly check-in); each step opens its own form and returns to the hub. Finished reports render as plain black-and-white documents. */
:root{--bg:#ffffff;--fg:#111111;--muted:#5c5c5c;--line:#cfcfcf;--soft:#f3f3f3;--ink-bg:#111111;--ink-fg:#ffffff;
--sans:system-ui,-apple-system,"Segoe UI",sans-serif;--mono:ui-monospace,Menlo,monospace}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#101010;--fg:#f1f1f1;--muted:#a3a3a3;--line:#3a3a3a;--soft:#1b1b1b;--ink-bg:#f1f1f1;--ink-fg:#101010;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#101010;--fg:#f1f1f1;--muted:#a3a3a3;--line:#3a3a3a;--soft:#1b1b1b;--ink-bg:#f1f1f1;--ink-fg:#101010;color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--fg);font:15px/1.5 var(--sans);padding-block:20px 56px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
main{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.view{display:flex;flex-direction:column;gap:22px}
h1{font-size:22px;font-weight:600;margin:0;letter-spacing:-.01em;text-wrap:balance}
h2{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;margin:0 0 10px;color:var(--muted)}
h2 small{text-transform:none;letter-spacing:0;font-weight:400;font-size:13px}
.sub{color:var(--muted);margin:2px 0 0}
section{border-top:1px solid var(--line);padding-top:16px;min-width:0}
label{display:block;font-size:13px;color:var(--muted);margin-bottom:4px}
input,select,textarea,button{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:9px 10px;min-width:0}
textarea{width:100%;resize:vertical;min-height:72px}
input[type=text],input[type=date],input[type=password],select{width:100%}
button{cursor:pointer}
button.primary,a.primary{background:var(--ink-bg);color:var(--ink-fg);border:1px solid var(--ink-bg);font-weight:500;border-radius:4px;padding:9px 14px;text-decoration:none;display:inline-block}
button.link{border:0;background:none;padding:4px 0;text-decoration:underline;color:var(--fg)}
button:disabled{opacity:.45;cursor:not-allowed}
:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.row{display:flex;gap:12px;flex-wrap:wrap}.row>*{flex:1 1 200px;min-width:0}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg label{margin:0;color:var(--fg);font-size:15px;border:1px solid var(--line);border-radius:4px;padding:8px 13px;cursor:pointer;position:relative}
.seg input{position:absolute;opacity:0;width:0;height:0;padding:0;border:0}
.seg input:checked+span{font-weight:600}
.seg label:has(input:checked){background:var(--ink-bg);color:var(--ink-fg);border-color:var(--ink-bg)}
.seg label:has(input:focus-visible){outline:2px solid var(--fg);outline-offset:2px}
.seg.sm{gap:4px;flex-wrap:nowrap}.seg.sm label{font:13px var(--mono);padding:5px 11px}
.checks{display:flex;flex-direction:column;gap:2px}
.checks label{display:flex;gap:10px;align-items:flex-start;color:var(--fg);font-size:15px;margin:0;padding:7px 2px;border-bottom:1px solid var(--line);cursor:pointer}
.checks input{width:18px;height:18px;margin-top:3px;flex:0 0 auto}
.note{font-size:13px;color:var(--muted)}
.bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.banner{border:1px solid var(--fg);padding:10px 12px;border-radius:4px;font-size:14px}
.chip{font:12px var(--mono);border:1px solid var(--line);border-radius:3px;padding:1px 6px;color:var(--muted)}
.test{font:12px var(--mono);border:1px solid var(--fg);border-radius:3px;padding:1px 6px;vertical-align:middle;margin-left:6px}
.who{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px}
/* hub steps */
.steps{display:flex;flex-direction:column;gap:12px}
.step{border:1px solid var(--line);border-radius:4px;padding:14px;display:flex;flex-direction:column;gap:10px}
.step.now{border:2px solid var(--fg)}
.step.locked{opacity:.55}
.step-h{display:flex;gap:12px;align-items:baseline}
.step-h .no{font:600 13px var(--mono);border:1px solid var(--fg);border-radius:50%;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.step.done .step-h .no{background:var(--ink-bg);color:var(--ink-fg)}
.step-h b{font-size:16px}
.step-h .st{margin-left:auto;font:12px var(--mono);color:var(--muted);white-space:nowrap}
.sent{display:flex;flex-direction:column;font-size:14px}
.sent div{border-top:1px solid var(--line);padding:6px 0;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
/* report forms */
.card{border:1px solid var(--line);border-radius:4px;padding:12px;display:flex;flex-direction:column;gap:10px}
.card.absent{background:var(--soft)}.card.absent .more{display:none}
.kid-head{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.kid-head .nm{font-weight:600}.kid-head .id{font:12px var(--mono);color:var(--muted);margin-left:6px}
.ex-head{display:flex;gap:8px;align-items:center}.ex-head .no{font-family:var(--mono);color:var(--muted);width:2ch}.ex-head input{flex:1}
.ex-foot{display:flex;gap:10px;justify-content:flex-end}
.count{font:13px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.lastbox{border:2px solid var(--fg);border-radius:4px;padding:12px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.lastbox>div{flex:1 1 220px;min-width:0}
.kids{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.kids button{padding:5px 11px;font-size:14px}
.kids button.done::after{content:" ✓"}
.kids button.on{background:var(--ink-bg);color:var(--ink-fg);border-color:var(--ink-bg)}
.sec{border:1px solid var(--line);border-radius:4px;padding:12px;display:flex;flex-direction:column;gap:8px}
.sec-head{display:flex;gap:8px;align-items:center}.sec-head input{flex:1;font-weight:600}
.item{display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:8px}
.item .txt{flex:1 1 240px;min-width:0}.item select{width:auto;flex:0 0 auto}
.bitem{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:6px 0;border-top:1px solid var(--line)}
.bitem span{flex:1 1 200px;min-width:0}
.bhead{display:flex;justify-content:space-between;margin-top:12px;font-weight:600;font-size:14px}
.bhead .n{font:13px var(--mono);font-variant-numeric:tabular-nums;color:var(--muted)}
.slot-h{display:flex;justify-content:space-between;gap:10px;font-weight:600;margin:14px 0 4px}.slot-h:first-child{margin-top:0}
.total{font:15px var(--mono);font-variant-numeric:tabular-nums;border:1px solid var(--line);border-radius:4px;padding:10px 12px;margin-top:12px}
.mail{display:flex;flex-direction:column;gap:8px;margin-top:10px}
/* finished documents: always black on white, like the paper versions */
.doc{background:#fff;color:#000;border:1px solid #000;padding:20px;font:13px/1.45 Arial,Helvetica,sans-serif}
.doc h3{margin:0 0 10px;font-size:20px;letter-spacing:.04em}
.doc h4{margin:16px 0 6px;font-size:13px;letter-spacing:.04em}
.doc .meta{display:flex;flex-wrap:wrap;gap:4px 18px;margin-bottom:6px}
.doc .scroll{overflow-x:auto}
.doc table{border-collapse:collapse;width:100%;min-width:480px}
.doc th,.doc td{border:1px solid #000;padding:5px 7px;vertical-align:top;text-align:left}
.doc th{font-size:11px;letter-spacing:.04em}.doc td.c,.doc th.c{text-align:center;white-space:nowrap}
.doc td.sh{font-weight:bold}
.doc .daily{margin-top:14px;border:1px solid #000;padding:10px 12px;white-space:pre-wrap}
.doc .daily p{margin:0 0 9px}.doc .daily p:last-child{margin:0}
.doc .key{margin-top:12px;font-size:11px}

/* ---------- site frame: top bar, sign-in pages, admin ---------- */
body{padding-top:0}
.top{max-width:760px;margin:0 auto 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding:12px 0}
body:has(main.wide) .top{max-width:1180px}
main.wide{max-width:1180px}
.top .brand{font:600 20px var(--sans);color:var(--fg);text-decoration:none;letter-spacing:.02em}
.top nav{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:14px}
.top nav a{color:var(--fg)}
.top .me{color:var(--muted)}
a{color:var(--fg)}
form.inline{display:inline;margin:0}
.narrow{max-width:420px;margin:0 auto;border-top:0}
.stack{display:flex;flex-direction:column;gap:14px}
.stack label{display:flex;flex-direction:column;gap:4px;color:var(--fg);font-size:14px}
.stack input[type=email],.stack input[type=password],.stack input[type=text]{width:100%}
.banner.err{border-width:2px;font-weight:500}
input[type=email],input[type=search]{width:100%}
table.list{border-collapse:collapse;width:100%;font-size:14px}
table.list th,table.list td{border-bottom:1px solid var(--line);padding:7px 8px;text-align:left;vertical-align:top}
table.list th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
table.list td.num{font-variant-numeric:tabular-nums;text-align:right}
.scrollx{overflow-x:auto}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs a{border:1px solid var(--line);border-radius:4px;padding:6px 12px;text-decoration:none}
.tabs a.on{background:var(--ink-bg);color:var(--ink-fg);border-color:var(--ink-bg)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.tile{border:1px solid var(--line);border-radius:4px;padding:14px;text-decoration:none;display:flex;flex-direction:column;gap:4px}
.tile b{font-size:16px}.tile .n{font:24px var(--mono);font-variant-numeric:tabular-nums}
.copybox{font:13px var(--mono);word-break:break-all;background:var(--soft);border:1px solid var(--line);border-radius:4px;padding:8px;user-select:all}
pre.rec{white-space:pre-wrap;font:13px/1.45 var(--mono);background:var(--soft);border:1px solid var(--line);padding:10px;border-radius:4px}