/* Acclaira client portal — house style: Ink + Gold + Bone, Fraunces + Outfit.
   Self-contained: no CDN fonts; the stacks fall back to elegant system faces. */
:root{
  --ink:#14181f; --ink2:#1e242e; --gold:#d4a94a; --gold-soft:#e6c883; --gold-deep:#8a7a55;
  --bone:#f4efe6; --bone-dim:#e7dfd0; --moss:#4a7d3f; --err:#b0532f; --muted:#7d7461;
  --shadow:0 14px 40px rgba(10,12,16,.10);
  --serif:Fraunces,"Iowan Old Style","Palatino Linotype",Georgia,"Times New Roman",serif;
  --sans:Outfit,"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important} /* our display:flex rules must never resurrect hidden elements */
html{-webkit-text-size-adjust:100%}
body{background:var(--bone);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.55;min-height:100vh}
a{color:inherit}
.wrap{max-width:880px;margin:0 auto;padding:0 18px}

/* ---------- loading + error ---------- */
.center-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.spinner{width:34px;height:34px;border-radius:50%;margin:0 auto 14px;
  border:3px solid var(--bone-dim);border-top-color:var(--gold);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-note{color:var(--muted);font-size:13px;text-align:center}
#loading>div{text-align:center}
.err-card{background:#fff;border:1px solid var(--bone-dim);border-top:4px solid var(--gold);
  border-radius:18px;box-shadow:var(--shadow);padding:34px 30px;max-width:460px;text-align:center}
.err-title{font-family:var(--serif);font-size:26px;font-weight:700;line-height:1.15;margin:14px 0 10px}
.err-body{color:var(--muted);font-size:14px;margin-bottom:20px}

/* ---------- brand + hero ---------- */
.brandmark{font-family:var(--sans);font-weight:700;font-size:14px;letter-spacing:.34em;color:var(--gold)}
.brandmark.small{font-size:12px;letter-spacing:.3em}
.hero{background:linear-gradient(160deg,var(--ink) 0%,var(--ink2) 100%);color:var(--bone);
  padding:26px 0 34px;border-bottom:3px solid var(--gold)}
.brand-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:26px}
.kicker{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft)}
.hero h1{font-family:var(--serif);font-size:clamp(30px,6vw,44px);font-weight:700;
  line-height:1.06;margin:6px 0 10px}
.hero-sub{color:var(--bone-dim);font-size:14px;max-width:520px}

/* ---------- buttons ---------- */
.btn{display:inline-block;border:none;border-radius:10px;padding:11px 20px;cursor:pointer;
  font:600 14px var(--sans);text-decoration:none;text-align:center;transition:filter .15s,transform .15s}
.btn.gold{background:linear-gradient(120deg,var(--gold),var(--gold-soft));color:var(--ink)}
.btn.gold:hover{filter:brightness(1.05)}
.btn.gold:active{transform:translateY(1px)}
.btn.sm{padding:8px 14px;font-size:12px;white-space:nowrap}
.btn.ghost{background:transparent;border:1.5px solid var(--ink);color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--bone)}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.btn[disabled]{opacity:.55;cursor:default}

/* ---------- cards + sections ---------- */
main.wrap{padding-top:26px;padding-bottom:8px}
.card{background:#fff;border:1px solid var(--bone-dim);border-radius:18px;
  box-shadow:var(--shadow);padding:24px 22px;margin-bottom:22px}
.sec-kicker{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep)}
.sec-title{font-family:var(--serif);font-size:24px;font-weight:700;line-height:1.15;margin:3px 0 4px}
.sec-sub{color:var(--muted);font-size:13px;margin-bottom:16px}
.empty-note{color:var(--muted);font-size:13px;background:var(--bone);border:1px dashed var(--bone-dim);
  border-radius:12px;padding:14px 16px}

/* ---------- stat tiles ---------- */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:6px 0 16px}
.stat{background:var(--bone);border:1px solid var(--bone-dim);border-radius:14px;padding:14px 15px}
.stat.lead{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.stat.lead .l{color:var(--bone-dim)}
.stat .n{font-family:var(--serif);font-size:27px;font-weight:700;line-height:1.05;
  font-variant-numeric:tabular-nums}
.stat.lead .n{color:var(--gold-soft)}
.stat .l{font-size:11px;color:var(--muted);margin-top:4px}
.delta{display:inline-block;font-size:12px;font-weight:700;margin-left:7px;vertical-align:3px}
.delta.up{color:var(--moss)}.delta.down{color:var(--err)}.delta.flat{color:#9a917e}
.stat.lead .delta.up{color:#9fd08f}.stat.lead .delta.down{color:#e0967a}

/* ---------- engine bars ---------- */
h3.sub{font-family:var(--serif);font-size:16px;font-weight:700;margin:18px 0 8px;
  padding-top:14px;border-top:1px solid var(--bone-dim)}
.bar-row{display:grid;grid-template-columns:96px 1fr 52px;gap:10px;align-items:center;
  margin:7px 0;font-size:13px}
.bar-rail{height:10px;background:var(--bone-dim);border-radius:99px;overflow:hidden}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-soft));
  border-radius:99px;min-width:2px}
.bar-val{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- milestones ---------- */
.mile{display:flex;gap:12px;align-items:baseline;padding:7px 0;border-bottom:1px dashed var(--bone-dim)}
.mile:last-child{border-bottom:none}
.mile .d{flex:none;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;width:82px}
.mile .t{font-size:13.5px;font-weight:600}

/* ---------- roadmap checklist ---------- */
.check{display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-bottom:1px dashed var(--bone-dim)}
.check:last-child{border-bottom:none}
.tick{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--bone-dim);
  display:flex;align-items:center;justify-content:center;margin-top:1px}
.check.done .tick{background:var(--gold);border-color:var(--gold)}
.tick svg{width:12px;height:12px;stroke:var(--ink);stroke-width:3;fill:none;display:none}
.check.done .tick svg{display:block}
.check .t{font-size:14px;font-weight:600}
.check.done .t{color:#5c5647}
.check .m{font-size:11.5px;color:var(--muted);margin-top:1px}
.check.na{opacity:.55}

/* ---------- work log ---------- */
.week{padding:12px 0;border-bottom:1px solid var(--bone-dim)}
.week:last-child{border-bottom:none}
.week-head{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.week-date{font-family:var(--serif);font-size:15px;font-weight:700}
.week-count{font-size:11px;color:var(--muted)}
.job{display:flex;gap:10px;align-items:flex-start;padding:5px 0}
.chip{flex:none;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--ink);color:var(--gold-soft);border-radius:99px;padding:3px 10px;margin-top:2px;
  white-space:nowrap}
.chip.partial{background:var(--bone-dim);color:var(--gold-deep)}
.job .t{font-size:13.5px}
.job .t a{color:var(--gold-deep);font-weight:600;text-decoration-color:var(--gold)}
.job .note{color:var(--muted)}

/* ---------- reports ---------- */
.report{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 4px;border-bottom:1px dashed var(--bone-dim);text-decoration:none}
.report:last-child{border-bottom:none}
.report:hover .rt{color:var(--gold-deep)}
.report .rt{font-size:14px;font-weight:600;transition:color .15s}
.report .rd{font-size:11.5px;color:var(--muted)}
.report .pdf{flex:none;font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--gold-deep);
  border:1.5px solid var(--gold);border-radius:8px;padding:4px 9px}

/* ---------- approvals ---------- */
.approval{background:var(--bone);border:1px solid var(--bone-dim);border-left:4px solid var(--gold);
  border-radius:14px;padding:16px 16px 14px;margin:12px 0}
.approval .at{font-family:var(--serif);font-size:17px;font-weight:700;margin-bottom:4px}
.approval .ar{font-size:13px;color:#5c5647;margin-bottom:10px}
.approval .alinks{margin-bottom:12px}
.approval .alinks a{font-size:13px;font-weight:600;color:var(--gold-deep)}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.shots figure{margin:0}
.shots img{width:100%;border-radius:10px;border:1px solid var(--bone-dim);display:block}
.shots figcaption{font-size:10.5px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.08em}
.decide{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 8px}
.approval textarea{margin-bottom:10px}
.approval .done-note{font-size:13.5px;font-weight:600;color:var(--moss)}

/* ---------- forms ---------- */
.field{display:block;margin-bottom:14px}
.field-label{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;margin-bottom:5px}
.field-label em{font-weight:400;color:var(--muted);font-style:normal}
input[type=text],textarea{width:100%;border:1.5px solid var(--bone-dim);border-radius:10px;
  background:#fff;padding:10px 12px;font:400 14px var(--sans);color:var(--ink)}
input[type=text]:focus,textarea:focus{outline:none;border-color:var(--gold)}
textarea{resize:vertical}
.hp{position:absolute;left:-5000px;height:0;overflow:hidden}
.form-note{margin-top:12px;font-size:13.5px;font-weight:600;color:var(--moss)}
.form-note.err{color:var(--err)}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:var(--bone-dim);margin-top:26px;
  padding:26px 0 30px;border-top:3px solid var(--gold)}
.foot-brand{font-size:12.5px;color:var(--bone)}
.foot-links{font-size:12.5px;margin-top:6px}
.foot-links a{color:var(--gold-soft);text-decoration:none}
.foot-links a:hover{text-decoration:underline}
.dot{margin:0 8px;color:var(--muted)}

@media (max-width:520px){
  .card{padding:20px 16px}
  .bar-row{grid-template-columns:78px 1fr 46px}
  .shots{grid-template-columns:1fr}
  .brand-row .btn{padding:8px 11px}
}
@media (prefers-reduced-motion:reduce){
  .spinner{animation:none}
  .btn{transition:none}
}