:root {
  --ink: #202721;
  --muted: #69736c;
  --paper: #f4f3ed;
  --surface: #fffefa;
  --line: #dcded8;
  --line-strong: #c4c9c3;
  --green: #315c48;
  --green-soft: #dce8df;
  --blue-soft: #e3ebf2;
  --amber: #a6612c;
  --red: #9c3e39;
  --shadow: 0 18px 55px rgba(35, 46, 39, .14);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--paper); }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
.eyebrow { margin: 0 0 .3rem; color: var(--green); font-size: .69rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-family: Georgia, serif; font-size: clamp(1.55rem, 2.7vw, 2.1rem); font-weight: 500; letter-spacing: -.03em; }
h2 { margin-bottom: 0; font-family: Georgia, serif; font-size: 1.5rem; font-weight: 500; }
h3 { margin-bottom: .5rem; }
.topbar { min-height: 88px; padding: 1rem clamp(1rem, 3vw, 2.5rem); display: grid; grid-template-columns: minmax(210px, 1fr) auto minmax(210px, 1fr); align-items: center; gap: 1rem; border-bottom: 1px solid var(--line); background: rgba(255, 254, 250, .92); position: sticky; top: 0; z-index: 10; }
.primary-nav { display: flex; align-self: end; gap: .25rem; }
.section-tab { padding: .7rem 1.1rem; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font-weight: 750; }
.section-tab:hover, .section-tab.active { color: var(--green); border-bottom-color: var(--green); }
.top-actions { display: flex; gap: .8rem; align-items: center; justify-content: flex-end; }
.identity { max-width: 180px; overflow: hidden; color: var(--muted); font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 38px; padding: .55rem .9rem; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--ink); background: var(--surface); text-decoration: none; font-weight: 700; }
.button:hover { border-color: #929b94; }.button.primary { border-color: var(--green); color: white; background: var(--green); }.button.small { min-height: 31px; padding: .35rem .65rem; font-size: .78rem; }
.layout { display: grid; grid-template-columns: 196px minmax(0, 1fr); max-width: 1680px; min-height: calc(100vh - 89px); margin: 0 auto; }
.sidebar { padding: 1.5rem 1rem; border-right: 1px solid var(--line); display: flex; flex-direction: column; background: rgba(245,245,239,.65); }
.summary { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 1.5rem; padding: .75rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.summary div { display: flex; flex-direction: column; align-items: center; }.summary strong { font-family: Georgia, serif; font-size: 1.2rem; font-weight: 500; }.summary span { color: var(--muted); font-size: .62rem; letter-spacing: .07em; text-transform: uppercase; }
.views { display: grid; gap: .2rem; }.view, .document-view { padding: .58rem .7rem; border: 0; border-radius: 5px; color: var(--muted); background: transparent; text-align: left; font-weight: 700; }.view:hover, .view.active, .document-view:hover, .document-view.active { color: var(--green); background: var(--green-soft); }
.text-button { margin-top: auto; padding: .6rem .7rem; border: 0; color: var(--muted); background: transparent; text-align: left; }.text-button:hover { color: var(--ink); }.text-button.danger { color: var(--red); }
.content { padding: 1.6rem clamp(1rem, 3vw, 2.6rem) 4rem; min-width: 0; }
.filters { display: grid; grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(120px, 165px)); gap: .65rem; margin-bottom: 1.6rem; }.document-filters { grid-template-columns: minmax(220px, 1fr) minmax(140px, 180px); }
label { display: grid; gap: .35rem; } label > span { color: var(--muted); font-size: .72rem; font-weight: 700; }
input, select, textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 6px; padding: .6rem .68rem; color: var(--ink); background: var(--surface); outline: none; } textarea { line-height: 1.5; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(49,92,72,.1); }
.search { align-self: end; }.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: .8rem; }.count { color: var(--muted); font-size: .8rem; }
.table-shell { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.task-table { width: 100%; border-collapse: collapse; table-layout: fixed; }.task-table th { padding: .58rem .7rem; border-bottom: 1px solid var(--line-strong); color: var(--muted); background: #f2f3ee; font-size: .68rem; letter-spacing: .05em; text-align: left; text-transform: uppercase; }.task-table th:first-child { width: 41%; }.task-table th:nth-child(2) { width: 12%; }.task-table th:nth-child(3) { width: 10%; }.task-table th:nth-child(4) { width: 9%; }.task-table th:nth-child(5) { width: 17%; }.task-table th:nth-child(6) { width: 11%; }
.task-row { cursor: pointer; }.task-row:hover { background: #f5f7f2; }.task-row td { height: 46px; padding: .48rem .7rem; border-bottom: 1px solid #e9eae5; overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }.task-row:last-child td { border-bottom: 0; }
.summary-cell { display: flex; align-items: center; gap: .42rem; min-width: 0; }.tree-indent { display: inline-block; flex: 0 0 17px; height: 22px; border-left: 1px solid var(--line-strong); }.tree-branch { flex: 0 0 auto; color: #99a29b; }.task-title { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }.subtask-progress { flex: 0 0 auto; color: var(--muted); font-size: .7rem; }.task-done .task-title { color: var(--muted); text-decoration: line-through; }
.status-pill, .owner-pill, .kind-pill { display: inline-block; max-width: 100%; padding: .22rem .48rem; border-radius: 999px; overflow: hidden; font-size: .69rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }.status-pill { background: #eceee9; }.status-in_progress { color: #335b78; background: var(--blue-soft); }.status-blocked { color: #8d3c37; background: #f3dfdd; }.status-done { color: var(--green); background: var(--green-soft); }.owner-pill { background: #eeeae2; }.priority-label { display: flex; align-items: center; gap: .4rem; color: var(--muted); text-transform: capitalize; }.priority-dot { width: 7px; height: 7px; border-radius: 50%; background: #aab2ad; }.priority-dot.high { background: var(--amber); }.priority-dot.urgent { background: var(--red); }.priority-dot.low { background: #b8beb9; }
.empty { margin: 3.5rem auto; color: var(--muted); text-align: center; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: radial-gradient(circle at 80% 0, #dfe9dc, transparent 35rem), var(--paper); }.login-card { width: min(100%, 430px); padding: 3rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }.login-card h1 { margin-bottom: 1rem; }.login-card p:not(.eyebrow) { color: var(--muted); line-height: 1.55; }.login-card .button { margin-top: 1rem; }
.document-layout { display: grid; grid-template-columns: minmax(230px, 30%) minmax(0, 1fr); min-height: 580px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }.document-list { border-right: 1px solid var(--line); background: #f7f7f2; }.document-row { width: 100%; padding: .85rem .9rem; border: 0; border-bottom: 1px solid var(--line); display: grid; gap: .3rem; color: var(--ink); background: transparent; text-align: left; }.document-row:hover, .document-row.active { background: var(--green-soft); }.document-row-title { overflow: hidden; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }.document-row-meta { display: flex; justify-content: space-between; gap: .5rem; color: var(--muted); font-size: .7rem; text-transform: capitalize; }
.document-reader { padding: clamp(1.3rem, 3vw, 2.5rem); overflow: auto; }.reader-empty { margin: 8rem auto; color: var(--muted); text-align: center; }.reader-head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }.reader-head h2 { font-size: 1.85rem; }.reader-meta { margin-top: .5rem; color: var(--muted); font-size: .76rem; text-transform: capitalize; }.reader-content { max-width: 760px; padding-top: 1.5rem; line-height: 1.65; }.reader-content h1, .reader-content h2, .reader-content h3 { margin: 1.4rem 0 .55rem; font-family: Georgia, serif; font-weight: 500; }.reader-content p { margin: 0 0 .65rem; white-space: pre-wrap; }.check-item { display: flex; grid-template-columns: auto 1fr; align-items: start; gap: .65rem; margin: .38rem 0; cursor: pointer; }.check-item input { width: auto; margin-top: .35rem; }.check-item.done span { color: var(--muted); text-decoration: line-through; }
dialog { width: min(750px, calc(100% - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--surface); box-shadow: var(--shadow); } dialog::backdrop { background: rgba(24,34,28,.45); backdrop-filter: blur(3px); } dialog form { padding: 1.4rem; }.dialog-head, .dialog-actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }.dialog-head { margin-bottom: 1rem; }.dialog-actions { margin-top: 1.3rem; }.icon-button { border: 0; color: var(--muted); background: transparent; font-size: 1.7rem; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: .8rem; }.form-grid .full, .full { grid-column: 1 / -1; margin-top: .8rem; }
.relationships, .activity { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }.relationships h3, .activity h3 { margin: 0; font-size: .86rem; }.relationship-heading { display: flex; align-items: center; justify-content: space-between; }.relationship-list { display: grid; gap: .35rem; margin-top: .7rem; }.relationship-link { padding: .45rem .55rem; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: #f6f7f2; text-align: left; }.relationship-link:hover { border-color: var(--green); }.note-entry { display: flex; gap: .5rem; margin-top: .7rem; } #event-list { max-height: 190px; margin: .8rem 0 0; padding-left: 1.2rem; }.event { margin-bottom: .65rem; padding-left: .2rem; color: var(--muted); font-size: .79rem; }.event strong { color: var(--ink); }.event time { display: block; margin-top: .1rem; font-size: .69rem; }.field-help { margin: .45rem 0 0; color: var(--muted); font-size: .75rem; }.error { min-height: 1.1em; margin: .7rem 0 0; color: var(--red); font-size: .8rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } [hidden] { display: none !important; }
@media (max-width: 960px) {
  .topbar { grid-template-columns: 1fr auto; }.primary-nav { grid-column: 1 / -1; grid-row: 2; justify-self: center; }.layout { grid-template-columns: 1fr; }.sidebar { padding: .7rem 1rem; border-right: 0; border-bottom: 1px solid var(--line); }.summary { display: none; }.views { display: flex; overflow-x: auto; }.view, .document-view { white-space: nowrap; }.sidebar > .text-button { display: none; }.filters { grid-template-columns: 1fr 1fr; }.search { grid-column: 1 / -1; }.task-table th:nth-child(4), .task-table td:nth-child(4), .task-table th:nth-child(5), .task-table td:nth-child(5) { display: none; }.task-table th:first-child { width: 50%; }.document-layout { grid-template-columns: 250px minmax(0,1fr); }
}
@media (max-width: 620px) {
  .brand .eyebrow, .identity { display: none; }.topbar { min-height: 72px; padding: .8rem 1rem; }.top-actions .button { padding: .48rem .65rem; }.filters, .document-filters { grid-template-columns: 1fr; }.search { grid-column: auto; }.content { padding: 1.1rem .7rem 3rem; }.task-table th:first-child { width: 64%; }.task-table th:nth-child(3), .task-table td:nth-child(3), .task-table th:nth-child(6), .task-table td:nth-child(6) { display: none; }.document-layout { grid-template-columns: 1fr; }.document-list { max-height: 240px; border-right: 0; border-bottom: 1px solid var(--line); }.document-reader { min-height: 420px; padding: 1.2rem; }.form-grid { grid-template-columns: 1fr; }.login-card { padding: 2rem; }
}