:root{
  --field:#1E3A4C; --field-ink:#F4F7F6;
  --bg:#EEF2F1; --surface:#FFFFFF; --ink:#1B2A33; --muted:#5B6F7B; --line:#CFDBE0; --chalk:#FFFFFF;
  --accent:#1E6E8C;
  --q-hu:#D9534A; --q-hp:#E8B43A; --q-lp:#4FA372; --q-lu:#4677B8;
  --danger:#B23B32;
  --r-sm:6px; --r-lg:14px;
  --head:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  box-sizing:border-box; color-scheme:light;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root{ color-scheme:dark; --bg:#13222C; --surface:#1A2D39; --ink:#E6EEF0; --muted:#97AAB4; --line:#2C4352; --chalk:#1A2D39; --accent:#6FB6D2; }
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--body);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--head);font-weight:600;letter-spacing:.01em;line-height:1.1;margin:0 0 .5rem}
h1{font-size:2rem} h2{font-size:1.5rem} h3{font-size:1.2rem}
p{margin:0 0 .75rem}
a{color:var(--accent)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* Shell */
.top{background:var(--field);color:var(--field-ink);display:flex;align-items:center;justify-content:space-between;padding:.7rem 1rem}
.brand{font-family:var(--head);font-weight:700;font-size:1.45rem;letter-spacing:.04em}
.top small{opacity:.75}
main{max-width:720px;margin:0 auto;padding:1rem 1rem 6rem}
nav.tabs{position:fixed;left:0;right:0;bottom:0;background:var(--field);display:flex;justify-content:center;padding-bottom:env(safe-area-inset-bottom,0px);z-index:5}
nav.tabs button{flex:1;max-width:150px;background:none;border:0;color:var(--field-ink);opacity:.65;padding:.75rem .25rem;font-family:var(--head);font-size:1.05rem;letter-spacing:.03em;cursor:pointer;border-top:3px solid transparent}
nav.tabs button[aria-current="page"]{opacity:1;border-top-color:var(--q-hp)}

/* Building blocks */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1rem;margin-bottom:1rem}
.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.grow{flex:1 1 180px}
label{display:block;font-weight:500;font-size:.92rem;margin:.6rem 0 .25rem}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{width:100%;padding:.6rem .7rem;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg)}
textarea{min-height:80px;resize:vertical}
input,select,textarea{color:var(--ink)}
input[type=date]{min-height:2.75rem;-webkit-appearance:none;appearance:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.65rem 1.1rem;border-radius:var(--r-sm);border:1px solid var(--field);background:var(--field);color:var(--field-ink);font-weight:600;cursor:pointer}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.small{padding:.35rem .7rem;font-size:.9rem}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.wide{width:100%}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:.3rem .8rem;cursor:pointer;font-size:.95rem}
.chip[aria-pressed="true"]{background:var(--field);color:var(--field-ink);border-color:var(--field)}
.seg{display:inline-flex;flex-wrap:wrap;max-width:100%;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.seg button{white-space:nowrap}
.seg button{border:0;background:transparent;padding:.4rem .8rem;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--field);color:var(--field-ink)}

/* The emotion plane: the one signature element */
.plane-wrap{position:relative;max-width:420px;margin:0 auto}
.plane{width:100%;height:auto;display:block;touch-action:manipulation;border-radius:var(--r-lg)}
.plane.interactive{cursor:crosshair}
.plane text{font-family:var(--head);fill:var(--muted)}
.readout{text-align:center;font-family:var(--head);font-size:1.15rem;margin:.4rem 0 0}

/* Entries and history */
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:flex;gap:.7rem;align-items:flex-start;padding:.6rem 0;border-top:1px solid var(--line)}
.timeline li:first-child{border-top:0}
.timeline .meta{font-size:.85rem;color:var(--muted)}
details.session{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:.7rem}
details.session>summary{list-style:none;cursor:pointer;padding:.8rem 1rem;display:flex;justify-content:space-between;gap:.6rem;align-items:center}
details.session>summary::-webkit-details-marker{display:none}
details.session[open]>summary{border-bottom:1px solid var(--line)}
details.session .body{padding:1rem}
.strip{display:flex;gap:2px;height:8px;margin-top:.35rem;max-width:220px}
.strip span{flex:1;border-radius:2px}
details.skill{border-top:1px solid var(--line);padding:.6rem 0}
details.skill:first-of-type{border-top:0}
details.skill summary{cursor:pointer;font-weight:600}
.steps{white-space:pre-line;margin:.5rem 0 0}
table{width:100%;border-collapse:collapse}
td,th{text-align:left;padding:.4rem .3rem;border-bottom:1px solid var(--line);vertical-align:top}
.scroll{overflow-x:auto}
.toast{position:fixed;left:50%;bottom:calc(5rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:.6rem 1rem;border-radius:var(--r-sm);z-index:20;max-width:90vw}
.auth{max-width:420px;margin:3rem auto;padding:0 1rem}
.auth .brand{color:var(--ink);font-size:2.4rem;display:block;margin-bottom:.25rem}
.notice{border-left:4px solid var(--q-hp);padding:.6rem .9rem;background:var(--surface);border-radius:var(--r-sm);font-size:.92rem}

.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1rem;font-size:.82rem;color:var(--muted);margin-top:.5rem}
.legend span{display:inline-flex;align-items:center;gap:.3rem}
.seg button{display:inline-flex;align-items:center;gap:.3rem}
.seg button:disabled{opacity:.5;cursor:not-allowed}
.btn.big{padding:1rem;font-size:1.1rem;margin-top:.6rem}
.arc-mini{width:64px;flex:none}
.phase-row{margin-bottom:.8rem}
.skill-order{list-style:none;margin:0;padding:0}
.skill-order li{display:flex;gap:.6rem;align-items:flex-start;padding:.5rem 0;border-top:1px solid var(--line)}
.skill-order li:first-child{border-top:0}
.arrows{display:flex;flex-direction:column;gap:.2rem;flex:none}
.arrow{width:2.2rem;height:1.7rem;border:1px solid var(--line);background:var(--bg);border-radius:var(--r-sm);cursor:pointer;font-size:.75rem;color:var(--ink)}
.arrow:disabled{opacity:.3;cursor:default}
.skill-edit{flex:1;min-width:0}
.skill-edit>summary{cursor:pointer;padding:.35rem 0}
.check-row{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;margin:.5rem 0}
.check-row input{margin-top:.3rem}
details.panel>summary{cursor:pointer}
.quick-head{display:flex;justify-content:space-between;align-items:center;gap:.8rem;margin-bottom:.5rem}
.ellip{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--head);font-size:1.4rem}
.phase-pill{display:inline-flex;align-items:center;gap:.35rem;background:var(--field);color:var(--field-ink);border-radius:999px;padding:.35rem .85rem;font-family:var(--head);font-size:1.1rem;flex:none}
.quick-plane{width:100%;max-width:min(100%,56vh);margin:0 auto}
.sync-note{margin:.2rem 0 .5rem;font-size:.85rem;color:var(--muted);text-align:center}
.skill-strip{display:flex;gap:.5rem;overflow-x:auto;padding:.3rem .1rem .6rem;scrollbar-width:thin}
.skill-chip{flex:none;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:.55rem 1rem;font-size:.95rem;cursor:pointer;min-height:44px}
.skill-chip:active{background:var(--field);color:var(--field-ink)}
.phase-actions{margin-top:.6rem}
.center{text-align:center}
.linkish{background:none;border:0;color:var(--muted);text-decoration:underline;font-size:.9rem;cursor:pointer;padding:.5rem}
.reflect-banner{border-left:4px solid var(--accent)}
.tag{display:inline-block;font-size:.75rem;font-weight:500;padding:.05rem .45rem;border-radius:999px;border:1px solid var(--line);color:var(--muted);vertical-align:middle;font-family:var(--body)}
.use-row .use-mark{width:18px;height:3px;background:var(--ink);margin-top:.7rem;flex:none;border-radius:2px}
.toast{top:calc(4.2rem + env(safe-area-inset-top,0px));bottom:auto;display:flex;align-items:center;gap:.8rem}
.toast-btn{background:transparent;border:1px solid currentColor;color:inherit;border-radius:var(--r-sm);padding:.25rem .7rem;font-weight:600;cursor:pointer}
.play-prompt{margin:.3rem 0 .6rem;font-size:1.5rem}
.skill-chip.cue,.chip.cue{font-style:italic}
.pend-row{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.6rem 0;border-top:1px solid var(--line)}
.plain{list-style:none;margin:0;padding:0}
.plain>li:first-child{border-top:0}
.steps-nav{margin-bottom:1rem;flex-wrap:wrap}
.steps-nav button{font-size:.9rem}
.feel-groups{display:grid;gap:.6rem}
.feel-label{display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--muted);margin-bottom:.25rem}
.feel-label i{width:10px;height:10px;border-radius:50%;display:inline-block}
.play-list{list-style:none;margin:0 0 1rem;padding:0}
.play-row{display:flex;gap:.6rem;align-items:stretch;padding:.4rem 0;border-top:1px solid var(--line)}
.play-row:first-child{border-top:0}
.play-card{flex:1;text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:.6rem .8rem;cursor:pointer;display:flex;flex-direction:column;gap:.2rem;color:var(--ink)}
.res{display:inline-block;font-size:.75rem;font-weight:600;padding:.05rem .5rem;border-radius:999px;color:#fff;white-space:nowrap}
.res-won{background:var(--q-lp)} .res-lost{background:var(--q-hu)} .res-even{background:var(--muted)}
.result-seg button{flex:1;padding:.6rem 1rem}
.result-seg{display:flex}
.used-card{border:1px solid var(--line);border-radius:var(--r-sm);padding:.7rem;margin-top:.7rem;background:var(--bg)}
.live-ref{margin-top:1.2rem;border-top:1px solid var(--line);padding-top:.6rem}
.live-ref summary{cursor:pointer;padding:.3rem 0}
details.fine summary{cursor:pointer;margin-top:.6rem;color:var(--accent)}
.play-view{margin:0;padding-left:1.2rem}
.play-view li{margin:.6rem 0}
.feel-dot{white-space:nowrap}
.feel-dot::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c);margin-right:.25rem}
.game-plan{border-left:4px solid var(--q-lp);padding:.4rem .8rem;background:var(--bg);border-radius:var(--r-sm)}
nav.tabs button{font-size:.98rem;padding:.75rem .1rem;white-space:nowrap;letter-spacing:.01em}
@media (max-width:380px){nav.tabs button{font-size:.88rem}}
.coach-note{border-left:4px solid var(--accent);background:var(--bg);padding:.5rem .8rem;border-radius:var(--r-sm);margin:.5rem 0}
.coach-note.unseen{box-shadow:0 0 0 2px var(--accent) inset}
.tag-note{border-color:var(--accent);color:var(--accent);font-weight:600}
.note-add{margin:.4rem 0 .8rem}
.note-add summary{cursor:pointer;color:var(--accent)}
.note-add textarea{margin-top:.4rem;min-height:70px}
.early{display:inline-block;font-size:.72rem;padding:0 .4rem;border-radius:999px;background:var(--line);color:var(--ink);font-weight:500;white-space:nowrap}
.xfer{padding:.7rem 0;border-top:1px solid var(--line)}
.xfer:first-of-type{border-top:0}
.xfer-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.3rem}
.xfer-grid>div{display:flex;flex-direction:column;background:var(--bg);border-radius:var(--r-sm);padding:.45rem .6rem}
.xfer-h{font-family:var(--head);font-size:.95rem;color:var(--muted)}
.xfer-flag{margin:.4rem 0 0;color:var(--accent);font-weight:500}
.trend{margin-top:.5rem;padding:.4rem .7rem;background:var(--bg);border-radius:var(--r-sm)}
.who{background:transparent;border:1px solid rgba(255,255,255,.35);color:var(--field-ink);border-radius:999px;padding:.3rem .8rem;font:inherit;font-size:.9rem;cursor:pointer;max-width:55%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who:hover{background:rgba(255,255,255,.1)}
.drill-row{display:flex;align-items:center;gap:.5rem;max-width:min(100%,56vh);margin:-.2rem auto .5rem;min-height:2.75rem}
.drill-row select{flex:1;min-height:2.75rem;font-weight:600;color:var(--accent)}
.drill-row input{flex:1;min-height:2.75rem}
.drill-lbl{margin:0;font-family:var(--head);font-size:1.05rem;color:var(--muted)}
.drill-bar{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.4rem 1rem;font:inherit;color:var(--ink);cursor:pointer;min-height:40px}
.drill-bar strong{color:var(--accent)}
.drill-head{border-top:0!important;padding:.8rem 0 .2rem!important;font-family:var(--head);font-size:1.05rem;color:var(--accent)}
.undo-row{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin:.4rem 0 .2rem;min-height:2.2rem}
.q-status{font-size:.9rem;color:var(--accent);font-weight:500}
#q-undo{min-width:5.5rem}
#q-undo:disabled{opacity:.35}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.privacy{max-width:640px}
.privacy h2{font-size:1.25rem;margin-top:1.5rem}
.privacy ul{padding-left:1.2rem}
.privacy li{margin:.3rem 0}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:4.5rem}
.pw-toggle{position:absolute;right:.35rem;top:50%;transform:translateY(-50%);background:transparent;border:0;color:var(--accent);font-weight:600;font-size:.9rem;padding:.45rem .6rem;cursor:pointer;min-height:2.2rem}
.coach-controls{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.6rem;padding:.6rem .8rem;margin-bottom:.8rem;background:var(--bg);border-radius:var(--r-sm)}
.note-row-item{border-top:0!important;padding:.2rem 0!important;display:block!important}
.note-row-item .coach-note{margin:.3rem 0}
.note-editing textarea{min-height:70px}
.drill-move{margin-top:.35rem;max-width:12rem;padding:.3rem .5rem;font-size:.9rem}
.note-row .note-row input{flex:1}
.drill-row #note-open{flex:none}
.name-link{background:none;border:0;padding:.3rem 0;font:inherit;font-weight:600;color:var(--accent);text-align:left;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.sport-row{padding:.8rem 0;border-top:1px solid var(--line)}
.panel>.sport-row:first-child{border-top:0;padding-top:0}
.sport-fields{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.sport-fields label{margin-top:0}
.sport-fixed{margin:.2rem 0 .3rem;font-size:1.05rem}
.wake-row{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin:-.2rem 0 .3rem;min-height:2rem}
.wake-row .small{line-height:1.3}
.wake-toggle{flex:none;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:999px;padding:.35rem .85rem;font:inherit;font-size:.85rem;cursor:pointer;min-height:2rem}
.wake-toggle::before{content:"";display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:var(--line);margin-right:.4rem;vertical-align:.05rem}
.wake-toggle[aria-checked="true"]{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.wake-toggle[aria-checked="true"]::before{background:#fff}