/* ANN&AGNES — warm, clean, touch-friendly. Staff use phones: big targets,
   readable text, minimal clutter. Brand palette matched to annagnes.com:
   primary purple #524692, deep purple #473c83, light accents #a080e1/#c2a5ff,
   light header with the company logo, warm neutrals. */
:root {
  --ink:#26241f; --muted:#6f6a60; --line:#e7dfd2; --bg:#faf8f3; --card:#ffffff;
  --accent:#524692; --accent-dark:#473c83; --ok:#1a7f37; --err:#b42318;
  --header:#ffffff; --radius:12px;
}
* { box-sizing:border-box; }
body { margin:0; font-family:-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;
  color:var(--ink); background:var(--bg); font-size:17px; line-height:1.5; }

/* ---- light brand header ---- */
.topbar { background:var(--header); color:var(--ink); padding:.55rem .9rem; display:flex;
  flex-wrap:wrap; gap:.4rem .9rem; align-items:center; justify-content:space-between;
  border-bottom:3px solid var(--accent); }
.brand { display:flex; align-items:center; gap:.6rem; }
.brand img.logo { height:46px; width:auto; display:block; }
.brand .wordmark { font-weight:700; font-size:1.05rem; letter-spacing:.02em; color:var(--accent-dark); }
.brand .wordmark span { display:block; font-weight:400; font-size:.72rem; color:var(--muted); }
.topbar nav { display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; }
.topbar nav a { color:var(--accent); text-decoration:none; font-size:.95rem; padding:.35rem .2rem; }
.topbar nav a:hover { color:var(--accent-dark); text-decoration:underline; }
.topbar .who { color:var(--muted); font-size:.85rem; }

/* ---- layout ---- */
.wrap { max-width:780px; margin:0 auto; padding:1rem .9rem 3rem; }
h1 { font-size:1.45rem; margin:.4rem 0 .5rem; }
h2 { font-size:1.12rem; margin:.2rem 0 .5rem; }
.muted { color:var(--muted); font-size:.92rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.1rem; margin:.85rem 0; box-shadow:0 1px 3px rgba(60,40,90,.06); }
.grid { display:grid; gap:.85rem; }
@media(min-width:640px){ .grid{ grid-template-columns:1fr 1fr; } }
a.card.client { text-decoration:none; color:inherit; display:block; }
a.card.client:hover { border-color:var(--accent); }

/* ---- progress ---- */
.prog { display:block; margin-top:.35rem; font-size:.92rem; font-weight:600; color:var(--accent-dark); }
.bar { display:block; height:10px; background:#e4dcf5; border-radius:6px; margin-top:.35rem; overflow:hidden; }
.bar span { display:block; height:100%; background:linear-gradient(90deg,var(--accent),#a080e1);
  border-radius:6px; transition:width .3s; }
.progwrap { display:flex; align-items:center; gap:.7rem; margin:.4rem 0 .2rem; }
.progwrap .bar { flex:1; margin-top:0; }

/* ---- day cards ---- */
.day { border-left:5px solid var(--line); }
.day.today-open { border-left-color:var(--accent); }
.day.done { border-left-color:var(--ok); }
.okline { color:var(--ok); font-weight:600; }

/* ---- forms: big touch targets ---- */
label { display:block; margin:.7rem 0; font-weight:600; }
label span.muted { display:block; font-weight:400; }
input[type=text], input:not([type]), input[type=password], textarea, select {
  width:100%; padding:.8rem; font-size:1.05rem; border:1.5px solid var(--line);
  border-radius:10px; margin-top:.3rem; background:#fff; }
input:focus, textarea:focus, select:focus { outline:2px solid var(--accent); border-color:var(--accent); }
textarea { resize:vertical; }
fieldset { border:1.5px solid var(--line); border-radius:10px; margin:.8rem 0; padding:.7rem; background:#fff; }
legend { font-weight:700; padding:0 .5rem; color:var(--accent-dark); }
.check { display:flex; gap:.85rem; align-items:center; font-weight:400; padding:.65rem .25rem;
  border-bottom:1px solid #f1ece2; margin:0; min-height:56px; cursor:pointer; }
.check:last-child { border-bottom:0; }
.check input[type=checkbox] { width:1.7rem; height:1.7rem; flex:none; accent-color:var(--accent); cursor:pointer; }
.btn { display:inline-block; background:var(--accent); color:#fff; border:0; border-radius:10px;
  padding:.9rem 1.4rem; font-size:1.05rem; font-weight:700; cursor:pointer;
  text-decoration:none; margin-top:.5rem; min-height:52px; }
.btn:hover { background:var(--accent-dark); }
.btn.primary { background:var(--ok); }
.btn.small { padding:.55rem .9rem; font-size:.92rem; min-height:44px; }
.btn.danger { background:var(--err); }
.btn:disabled { opacity:.5; }
.linkbtn { background:none; border:0; color:#a080e1; cursor:pointer; font-size:.92rem; padding:.3rem; }
.inline { display:inline; } .inline-form { margin-top:.6rem; }
.row { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
.row-between { display:flex; justify-content:space-between; gap:.6rem; align-items:center; flex-wrap:wrap; }
.ok { background:#e9f7ee; border:1px solid #bfe3c9; border-radius:10px; padding:.9rem; }
.err { color:var(--err); font-weight:600; }
.mono { font-family:ui-monospace,Menlo,monospace; font-size:.85rem; word-break:break-all; }
table.audit { width:100%; border-collapse:collapse; font-size:.82rem; background:#fff; }
table.audit th, table.audit td { border:1px solid var(--line); padding:.45rem; text-align:left; vertical-align:top; }
.foot { text-align:center; color:var(--muted); font-size:.8rem; padding:1.4rem; }
.day h2 .muted { font-weight:400; }

/* ---- login / enroll hero ---- */
.hero { text-align:center; padding:1.2rem 0 .4rem; }
.hero img.logo { width:210px; height:auto; border-radius:18px; box-shadow:0 4px 14px rgba(0,0,0,.25); }
.hero h1 { margin:.7rem 0 .2rem; }

/* ---- celebration overlay (thumbs-up) ---- */
.cheer { position:fixed; inset:0; z-index:60; display:flex; align-items:center;
  justify-content:center; padding:1.2rem; background:rgba(38,32,64,.55);
  animation:cheer-fade .3s ease-out; }
.cheer-card { background:#fff; border-radius:20px; padding:2rem 1.6rem 1.6rem;
  text-align:center; max-width:340px; width:100%; position:relative; overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
  animation:cheer-card .45s cubic-bezier(.2,1.4,.4,1); }
.cheer-badge { width:112px; height:112px; margin:0 auto .9rem; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #6f5fc0, #524692 70%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(82,70,146,.45);
  animation:cheer-pop .55s .1s cubic-bezier(.2,1.6,.4,1) backwards; }
.cheer-badge svg { width:56px; height:56px; fill:#fff; }
.cheer-card h2 { color:var(--accent-dark); margin:.2rem 0 .3rem; font-size:1.5rem; }
.cheer-card p { color:var(--muted); margin:0 0 1.2rem; }
.cheer-spark { position:absolute; width:10px; height:10px; border-radius:50%;
  background:#c2a5ff; opacity:0; animation:cheer-spark 1.4s ease-out infinite; }
@keyframes cheer-pop { 0%{transform:scale(0) rotate(-18deg);}
  70%{transform:scale(1.18) rotate(6deg);} 100%{transform:scale(1) rotate(0);} }
@keyframes cheer-card { from{transform:translateY(26px) scale(.96); opacity:0;}
  to{transform:none; opacity:1;} }
@keyframes cheer-fade { from{opacity:0;} to{opacity:1;} }
@keyframes cheer-spark { 0%{opacity:0; transform:scale(.4) translateY(0);}
  30%{opacity:.9;} 100%{opacity:0; transform:scale(1) translateY(-46px);} }
@media (prefers-reduced-motion: reduce) {
  .cheer, .cheer-card, .cheer-badge, .cheer-spark { animation:none; }
}

/* ---- shift picker ("Who are you working with today?") ---- */
.pickgrid { display:grid; gap:.7rem; margin:1rem 0 1.2rem; }
.pick { display:flex; gap:.9rem; align-items:center; background:#fff;
  border:2px solid var(--line); border-radius:14px; padding:1rem 1.1rem;
  cursor:pointer; min-height:68px; }
.pick input { width:28px; height:28px; accent-color:var(--accent); flex:none; }
.pick:has(input:checked) { border-color:var(--accent); background:#f3f0fc; }
.pick-body { display:flex; flex-direction:column; gap:.1rem; }
.pick-body strong { font-size:1.05rem; }
.btn.big { width:100%; padding:1rem; font-size:1.1rem; }
.shiftline { background:#f3f0fc; border:1px solid #d9cff5; border-radius:10px;
  padding:.7rem .9rem; }
.shiftline a { color:var(--accent); font-weight:600; }