/* CTS Bookkeeping — v2 website prototype
   Built on DESIGN_SCHEMA.md (the BHBC "Refined Editorial" system). */

:root {
  --navy:#1d395d; --navy-deep:#142843; --navy-darkest:#0a1629; --ink:#0F1B2C;
  --cream:#F7F4EE; --paper:#FFFFFF;
  --gold:#B0883B; --gold-soft:#C9A24A; --gold-warm:#c49f66;
  --muted:#6B7585; --line:#E7E1D6; --sky:#AFD8FB;
  --ok-bg:#e3f4e8; --ok:#1e7a3a; --warn-bg:#fdf1d7; --warn:#8a5a00; --due-bg:#fbe5e6; --due:#a3262c;
  --font-display:'Cormorant Garamond', Georgia, serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius:0.625rem;
  --shadow-md:0 4px 12px rgba(15,23,42,.08);
}

* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font-body); font-weight:500; font-size:15px; line-height:1.55;
  color:var(--ink); background:var(--cream);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
}
h1,h2,h3,.font-display { font-family:var(--font-display); font-weight:600; letter-spacing:-.01em; }
a { color:inherit; text-decoration:none; }

/* ── App shell ─────────────────────────────────────────── */
.app { display:flex; min-height:100vh; }

/* Sidebar */
.side {
  width:236px; flex-shrink:0; background:var(--navy-deep); color:#dfe6f0;
  padding:26px 18px; display:flex; flex-direction:column; gap:4px;
  position:sticky; top:0; height:100vh;
}
.brand { display:flex; align-items:center; gap:12px; margin-bottom:26px; }
.brand .logo {
  width:38px; height:38px; border-radius:11px;
  background:linear-gradient(135deg,#27457a,#16294a);
  display:grid; place-items:center; font-family:var(--font-display);
  font-weight:600; color:var(--gold-soft); font-size:22px;
  box-shadow:0 6px 16px rgba(0,0,0,.35); position:relative; overflow:hidden;
}
.brand .logo::after {
  content:''; position:absolute; bottom:0; right:0; width:11px; height:11px;
  background:var(--gold-warm); clip-path:polygon(100% 0,100% 100%,0 100%);
}
.brand b { font-family:var(--font-display); font-size:21px; font-weight:600; color:#fff; line-height:1; display:block; }
.brand span { display:block; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#8fa3c2; margin-top:3px; }

.navlabel { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#6f84a6; margin:18px 0 6px 12px; }
.nav a {
  display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:9px;
  color:#b9c6da; font-size:13.5px; font-weight:500; position:relative; transition:background .15s, color .15s;
}
.nav a:hover { background:rgba(255,255,255,.05); color:#fff; }
.nav a.active { background:rgba(176,136,59,.16); color:#fff; box-shadow:inset 3px 0 0 var(--gold-soft); }
.nav a .ico { width:16px; height:16px; border-radius:4px; background:currentColor; opacity:.55; flex-shrink:0; }
.nav a.active .ico { opacity:.9; }

.side-foot { margin-top:auto; padding-top:18px; border-top:1px solid rgba(255,255,255,.08); font-size:11px; color:#8fa3c2; }

/* Main */
.main { flex:1; min-width:0; padding:48px 64px 80px; max-width:1100px; }
.eyebrow { font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); font-weight:600; }
h1.hero { font-size:64px; line-height:1.02; letter-spacing:-.5px; color:var(--navy); margin:10px 0 8px; }
h1.hero em { font-style:italic; color:var(--gold); }
.sub { font-size:15px; color:var(--muted); max-width:560px; line-height:1.55; }

/* Stat band */
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:36px; margin:48px 0; }
.stat .k { font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.stat .v { font-family:var(--font-display); font-weight:600; font-size:78px; line-height:.95; color:var(--navy); margin-top:6px; text-shadow:0 2px 10px rgba(20,40,72,.08); }
.stat .v small { font-size:30px; color:var(--gold); }
.stat .meta { font-size:12.5px; color:var(--muted); margin-top:6px; }

/* Section headers */
.sectiontitle { font-size:26px; font-weight:600; color:var(--navy); margin:40px 0 4px; }
.sectionsub { font-size:12px; letter-spacing:.04em; color:var(--muted); text-transform:uppercase; margin-bottom:16px; }

/* Quick actions */
.qa { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.qa a {
  display:flex; align-items:center; gap:10px; padding:16px; background:var(--paper);
  border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-md);
  font-size:13.5px; font-weight:600; color:var(--ink); transition:border-color .15s, transform .06s;
}
.qa a:hover { border-color:var(--navy); }
.qa a:active { transform:scale(.99); }
.qa .ic { width:30px; height:30px; border-radius:8px; background:var(--cream); border:1px solid var(--line); display:grid; place-items:center; color:var(--gold); flex-shrink:0; }
.qa .ic::before { content:'+'; font-size:18px; font-weight:600; }

/* Panel + rows */
.panel { background:var(--paper); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-md); overflow:hidden; }
.row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 18px; border-bottom:1px solid var(--line); }
.row:last-child { border-bottom:none; }
.row .who { display:flex; align-items:center; gap:12px; min-width:0; }
.row .avatar { width:36px; height:36px; border-radius:9px; background:linear-gradient(135deg,#27457a,#16294a); color:var(--gold-soft); display:grid; place-items:center; font-family:var(--font-display); font-weight:600; font-size:15px; flex-shrink:0; }
.row .name { font-size:13.5px; font-weight:600; color:var(--ink); }
.row .meta { font-size:12px; color:var(--muted); margin-top:1px; }
.pill { font-size:11px; font-weight:600; padding:3px 10px; border-radius:999px; white-space:nowrap; }
.pill.ok { background:var(--ok-bg); color:var(--ok); }
.pill.warn { background:var(--warn-bg); color:var(--warn); }
.pill.due { background:var(--due-bg); color:var(--due); }

/* Mobile */
@media (max-width:880px) {
  .side { display:none; }
  .main { padding:32px 22px 60px; }
  h1.hero { font-size:44px; }
  .stats { grid-template-columns:1fr 1fr; gap:24px; }
  .stat .v { font-size:60px; }
  .qa { grid-template-columns:1fr 1fr; }
}