:root{
  --ink:#0a0a0a; --mid:#3a3a3a; --light:#7a7a7a;
  --bg:#f7f7f7; --subtle:#ebebeb; --border:#d8d8d8; --white:#ffffff;
  --accent:#8a6d3b;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter',Helvetica,Arial,sans-serif;
  font-size:15px; line-height:1.5;
}
h1,h2,h3,.serif{ font-family:'Libre Baskerville',Georgia,serif; }
h1{font-size:1.5rem;margin:0;}
h2{font-size:1.05rem; margin:0 0 4px 0; letter-spacing:.02em;}
h3{font-size:.95rem; margin:0;}

/* Nav */
.nav{
  position:sticky; top:0; z-index:50; background:var(--white);
  border-bottom:1px solid var(--border); padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.nav-left{display:flex; align-items:center; gap:14px;}
.nav-right{display:flex; align-items:center; gap:12px;}
.brand-mark{width:34px; height:34px; border-radius:50%; background:var(--ink); color:var(--white);
  display:flex; align-items:center; justify-content:center; font-family:'Libre Baskerville',serif; font-size:15px;}
.nav-sub{font-size:.72rem; color:var(--light); text-transform:uppercase; letter-spacing:.08em;}
.user-chip{font-size:.78rem; color:var(--mid);}
.user-chip .role{color:var(--accent); text-transform:uppercase; font-size:.68rem; letter-spacing:.05em; margin-left:6px;}
.view-toggle{display:flex; border:1px solid var(--border); border-radius:6px; overflow:hidden;}
.view-toggle button{
  border:none; background:var(--white); color:var(--mid); padding:8px 16px; font-size:.8rem;
  cursor:pointer; font-family:'Inter',sans-serif; letter-spacing:.03em;
}
.view-toggle button.active{background:var(--ink); color:var(--white);}

.wrap{max-width:1000px; margin:0 auto; padding:24px;}

/* Sign-in */
.signin-screen{
  max-width:420px; margin:80px auto; text-align:center; background:var(--white);
  border:1px solid var(--border); border-radius:10px; padding:40px 30px;
}
.signin-screen p{color:var(--light); font-size:.85rem; margin-bottom:20px;}
#gsiButton{display:flex; justify-content:center;}

/* Client bar */
.client-bar{
  background:var(--white); border:1px solid var(--border); border-radius:10px;
  padding:16px 20px; margin-bottom:20px; display:flex; gap:14px; align-items:center; flex-wrap:wrap;
}
select, input[type=text], input[type=date], textarea{
  font-family:'Inter',sans-serif; border:1px solid var(--border); border-radius:6px;
  padding:8px 10px; font-size:.85rem; background:var(--white); color:var(--ink);
}
select{min-width:200px;}
button.btn{
  font-family:'Inter',sans-serif; font-size:.8rem; letter-spacing:.02em; cursor:pointer;
  border-radius:6px; padding:8px 14px; border:1px solid var(--ink); background:var(--ink); color:var(--white);
}
button.btn.secondary{background:var(--white); color:var(--ink);}
button.btn.subtle{background:var(--white); color:var(--mid); border-color:var(--border); font-size:.75rem; padding:6px 10px;}
button.btn:hover{opacity:.85;}
button.btn:disabled{opacity:.5; cursor:not-allowed;}

/* Dashboard */
.dash{
  background:var(--white); border:1px solid var(--border); border-radius:10px;
  padding:20px 22px; margin-bottom:22px;
}
.overall-row{display:flex; align-items:center; gap:16px; margin-bottom:16px;}
.overall-pct{font-family:'Libre Baskerville',serif; font-size:2rem;}
.bar-track{flex:1; height:10px; background:var(--subtle); border-radius:5px; overflow:hidden;}
.bar-fill{height:100%; background:var(--accent); border-radius:5px; transition:width .4s ease;}
.cat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px;}
.cat-chip{border:1px solid var(--border); border-radius:8px; padding:10px 12px; cursor:pointer; background:var(--bg);}
.cat-chip:hover{border-color:var(--ink);}
.cat-chip .name{font-size:.78rem; color:var(--mid); margin-bottom:6px; text-transform:uppercase; letter-spacing:.04em;}
.cat-chip .pct{font-family:'Libre Baskerville',serif; font-size:1.2rem;}
.cat-chip .mini-track{height:5px; background:var(--subtle); border-radius:3px; margin-top:6px; overflow:hidden;}
.cat-chip .mini-fill{height:100%; background:var(--accent);}

/* Category sections */
.category{background:var(--white); border:1px solid var(--border); border-radius:10px; margin-bottom:16px; overflow:hidden;}
.cat-header{padding:16px 20px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; background:var(--white);}
.cat-header:hover{background:var(--bg);}
.cat-header .pct-tag{font-size:.78rem; color:var(--light); font-family:'Inter',sans-serif;}
.items{padding:0 20px 16px 20px; display:none;}
.items.open{display:block;}
.item{
  border-top:1px solid var(--subtle); padding:14px 0; display:flex; gap:12px; align-items:flex-start;
}
.item input[type=checkbox]{margin-top:3px; width:17px; height:17px; accent-color:var(--ink); cursor:pointer;}
.item-body{flex:1;}
.item-title{font-size:.88rem; font-weight:600; margin-bottom:2px;}
.item-title.done{color:var(--light); text-decoration:line-through; font-weight:400;}
.item-tip{font-size:.78rem; color:var(--light); margin-bottom:8px;}
.item textarea{width:100%; min-height:44px; resize:vertical; font-size:.8rem;}
.item-notes-label{font-size:.7rem; color:var(--light); text-transform:uppercase; letter-spacing:.05em; margin-bottom:3px; display:block;}
.coach-only{background:#faf6ee; border:1px dashed #d9c9a8; border-radius:6px; padding:8px 10px; margin-top:8px;}
.coach-only .item-notes-label{color:var(--accent);}

.empty-state{text-align:center; padding:60px 20px; color:var(--light);}
.empty-state h2{color:var(--ink); margin-bottom:8px;}

.banner{background:#faf6ee; border:1px solid #d9c9a8; border-radius:8px; padding:12px 16px; margin-bottom:18px; font-size:.85rem;}
.banner.error{background:#fbeaea; border-color:#e3b3b3;}
.invite-box{display:flex; gap:8px; align-items:center; margin-top:8px; flex-wrap:wrap;}
.invite-box input{flex:1; min-width:220px; font-size:.78rem;}

footer{
  text-align:center; padding:24px; font-size:.72rem; color:var(--light);
  border-top:1px solid var(--border); margin-top:20px;
}

@media print{
  .nav, .client-bar, .no-print{display:none !important;}
  .items{display:block !important;}
  .category{break-inside:avoid;}
}
@media (max-width:640px){
  .wrap{padding:14px;}
  .nav{padding:12px 14px;}
  select{min-width:140px;}
}