/* Village app shell */
body { background: var(--paper); }
.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }

/* Sidebar */
.side {
  background: var(--card); border-right: 1px solid var(--line);
  padding: 1rem .9rem; display: flex; flex-direction: column; gap: .25rem;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.side .wordmark { margin: .2rem .3rem 1rem; align-self: flex-start; }
.side .grp { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: .8rem .55rem .25rem; }
.side a.navlink {
  display: flex; align-items: center; gap: .55rem; text-decoration: none;
  color: var(--ink); padding: .5rem .6rem; border-radius: var(--r-sm); font-size: .93rem; font-weight: 500;
}
.side a.navlink:hover { background: var(--indigo-50); }
.side a.navlink.active { background: var(--indigo-100); color: var(--ink-900); font-weight: 600; }
.side a.navlink .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); margin-left: auto; }
.side .me { margin-top: auto; border-top: 1px solid var(--line); padding-top: .9rem; display: flex; gap: .6rem; align-items: center; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--indigo-600); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .8rem; flex: none; }
.me .who { line-height: 1.2; }
.me .who b { display: block; font-size: .88rem; }
.me .who span { font-size: .74rem; color: var(--muted); font-family: var(--mono); }

/* Topbar + main */
.main { min-width: 0; }
.topbar {
  display: flex; align-items: center; gap: .8rem; padding: .8rem 1.4rem;
  border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 85%, white);
  position: sticky; top: 0; z-index: 30;
}
.topbar .assoc { font-weight: 600; color: var(--ink-900); }
.topbar .assoc small { display: block; font-family: var(--mono); font-size: .7rem; color: var(--muted); font-weight: 400; }
.topbar .spacer { margin-left: auto; }
.roleswitch { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--card); }
.roleswitch button { border: 0; background: transparent; padding: .38em .9em; font-size: .82rem; font-weight: 600; cursor: pointer; color: var(--muted); }
.roleswitch button.on { background: var(--ink-900); color: #fff; }
.demo-banner { background: var(--clay); color: #fff; font-size: .82rem; padding: .45em 1.4rem; }
.demo-banner a { color: #fff; }

.content { padding: 1.6rem 1.4rem 4rem; max-width: 1080px; }
.content h1 { font-family: var(--serif); font-weight: 500; font-size: 1.9rem; color: var(--ink-900); margin: .1em 0 .15em; }
.content .pagesub { color: var(--muted); margin: 0 0 1.4rem; max-width: 46em; }
.content h2.sec { font-size: 1.05rem; margin: 1.8rem 0 .7rem; color: var(--ink-900); }

/* Grids & stats */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.stat { padding: 1.05rem 1.15rem; }
.stat .lbl { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.stat .big { font-family: var(--mono); font-size: 1.55rem; font-weight: 600; color: var(--ink-900); margin: .15em 0; }
.stat .big small { font-size: .85rem; color: var(--muted); font-weight: 400; }
.stat .note { font-size: .8rem; color: var(--muted); }
.bar { height: 6px; border-radius: 4px; background: var(--indigo-100); overflow: hidden; margin: .5em 0 .3em; }
.bar i { display: block; height: 100%; background: var(--green); border-radius: 4px; }
.bar i.indigo { background: var(--indigo-600); }
.bar i.amber { background: var(--amber); }

.list { display: grid; gap: .7rem; }
.row-card { padding: .95rem 1.1rem; display: flex; gap: .9rem; align-items: flex-start; }
.row-card .body { min-width: 0; flex: 1; }
.row-card h3 { margin: 0 0 .15rem; font-size: .99rem; }
.row-card p { margin: 0; color: var(--muted); font-size: .88rem; }
.row-card .end { margin-left: auto; text-align: right; flex: none; display: grid; gap: .35rem; justify-items: end; }
.row-card.click { cursor: pointer; }
.row-card.click:hover { border-color: var(--indigo-500); }

/* Tables */
.tablewrap { overflow-x: auto; border-radius: var(--r-lg); }
table.tbl { width: 100%; border-collapse: collapse; background: var(--card); font-size: .9rem; min-width: 560px; }
table.tbl th { text-align: left; font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: .7rem .9rem; border-bottom: 1px solid var(--line); }
table.tbl td { padding: .65rem .9rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.tbl tr:last-child td { border-bottom: 0; }
td.money, th.money { text-align: right; }

/* Forms & modal */
.field { display: grid; gap: .3rem; margin-bottom: .85rem; }
.field > span { font-size: .84rem; font-weight: 600; color: var(--ink-900); }
.field input, .field select, .field textarea {
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: .58em .7em; background: #fff; width: 100%;
}
.field textarea { min-height: 90px; resize: vertical; }
.searchbox { display: flex; gap: .6rem; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: .6rem .9rem; margin-bottom: 1rem; }
.searchbox input { border: 0; outline: none; flex: 1; background: transparent; font-size: 1rem; min-width: 0; }

.modal-veil { position: fixed; inset: 0; background: rgba(28,26,46,.45); display: grid; place-items: center; padding: 1rem; z-index: 100; }
.modal { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); width: min(620px, 100%); max-height: 88vh; overflow-y: auto; padding: 1.4rem 1.5rem; }
.modal h2 { font-family: var(--serif); font-weight: 500; margin: 0 0 .8rem; color: var(--ink-900); font-size: 1.4rem; }
.modal .actions { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.1rem; flex-wrap: wrap; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--ink-900); color: #fff; padding: .65em 1.1em; border-radius: 999px;
  font-size: .88rem; box-shadow: var(--shadow-pop); z-index: 200; max-width: 92vw; text-align: center;
}

/* Documents search results */
.hitpre, .hitpost { color: var(--muted); }
.hitmatch { background: color-mix(in srgb, var(--amber) 22%, white); border-radius: 3px; padding: 0 .15em; }
.secnum { font-family: var(--mono); color: var(--indigo-600); font-weight: 600; }

/* Compliance */
.due-soon { border-left: 3px solid var(--amber); }
.overdue { border-left: 3px solid var(--red); }
.done-item { opacity: .72; }

/* Filter pills */
.pills { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: 1rem; }
.pills button { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: .3em .85em; font-size: .82rem; cursor: pointer; color: var(--muted); font-weight: 500; }
.pills button.on { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }

/* Empty states */
.empty { text-align: center; padding: 2.6rem 1.4rem; color: var(--muted); }
.empty h3 { color: var(--ink-900); font-family: var(--serif); font-weight: 500; font-size: 1.25rem; margin: 0 0 .4rem; }

/* Onboarding */
.wizard { max-width: 560px; margin: 3rem auto; padding: 1.8rem 1.9rem; }
.wizard .steps { font-family: var(--mono); font-size: .72rem; color: var(--muted); margin-bottom: .8rem; }
.wizard h1 { font-size: 1.5rem; }

/* Mobile */
.menu-btn { display: none; border: 1px solid var(--line); background: var(--card); border-radius: var(--r-sm); padding: .4em .6em; cursor: pointer; }
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; inset: 0 28% 0 0; z-index: 90; transform: translateX(-102%); transition: transform .2s ease; box-shadow: var(--shadow-pop); height: 100vh; }
  .side.open { transform: none; }
  .side-veil { position: fixed; inset: 0; background: rgba(28,26,46,.35); z-index: 80; }
  .menu-btn { display: inline-flex; }
  .stat-grid { grid-template-columns: 1fr; }
  .content { padding: 1.1rem 1.5rem 4rem; }
  .topbar { padding: .7rem 1.5rem; }
  .roleswitch button { padding: .38em .6em; font-size: .76rem; }
}