/* Investor CRM, built to James's 27 Oct "People" mockup: warm ivory, deep green buttons, gold dates, a serif for
   names and headings (Source Serif 4) and Inter for everything read. Every rule is scoped to .crm-app so nothing
   here touches the rest of Space, and Space's styles stay out of here. Sizes are the mockup's own at 1536 wide. */

@font-face { font-family: 'CRM Serif'; font-weight: 300 900; font-display: swap; src: url('/crm-fonts/SourceSerif4-Variable.woff2') format('woff2'); }

.crm-app {
  --c-bg: #F7F4EE; --c-side: #F8F6F1; --c-panel: #FBFAF6; --c-card: #FDFCF9; --c-field: #F0EDE6; --c-tint: #EDEEE8; --c-nav-on: #ECEAE5;
  --c-line: #E5E1D8; --c-hair: #ECE8E0; --c-ink: #1F2622; --c-muted: #676B66; --c-faint: #8B8E88;
  --c-green: #1F4A3D; --c-green-hover: #183C31; --c-on-green: #F4F7F3; --c-gold: #B5823A; --c-red: #B4412F; --c-red-soft: #F8E5DF;
  --c-pill-green: #E3E8E1; --c-pill-green-ink: #3B5A4A; --c-pill-amber: #F5E7D3; --c-pill-amber-ink: #8A5A22;
  --c-pill-blue: #E3E9F0; --c-pill-blue-ink: #34506E; --c-pill-grey: #ECEAE5; --c-pill-grey-ink: #5D605B;
  --c-shadow: rgba(30, 30, 20, 0.12);
  --c-serif: 'CRM Serif', 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --c-sans: 'Inter', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --c-side-w: 235px; --c-panel-w: 472px;
  position: fixed; inset: 0; z-index: 1; display: grid; grid-template-columns: var(--c-side-w) minmax(0, 1fr);
  background: var(--c-bg); color: var(--c-ink); font: 16px/1.45 var(--c-sans); -webkit-font-smoothing: antialiased; overflow: hidden;
}
.crm-app.with-panel { grid-template-columns: var(--c-side-w) minmax(0, 1fr) var(--c-panel-w); }
.crm-app.share { position: static; display: block; min-height: 100vh; overflow: visible; }
@media (prefers-color-scheme: dark) {
  .crm-app {
    --c-bg: #121A17; --c-side: #141D19; --c-panel: #17211D; --c-card: #1B2621; --c-field: #1E2925; --c-tint: #22302A; --c-nav-on: #22302A;
    --c-line: #2C3833; --c-hair: #24302B; --c-ink: #EDEAE2; --c-muted: #A3A9A2; --c-faint: #858B84;
    --c-green: #CFE3D5; --c-green-hover: #E2EEE5; --c-on-green: #10201A; --c-gold: #D9A962; --c-red: #E7826F; --c-red-soft: rgba(231, 130, 111, 0.15);
    --c-pill-green: #253A31; --c-pill-green-ink: #BFD9C9; --c-pill-amber: #3D3020; --c-pill-amber-ink: #E8C48E;
    --c-pill-blue: #22303E; --c-pill-blue-ink: #B9CCE2; --c-pill-grey: #262E2A; --c-pill-grey-ink: #B9BDB6; --c-shadow: rgba(0, 0, 0, 0.45);
  }
}
.crm-app *, .crm-app *::before, .crm-app *::after { box-sizing: border-box; }
.crm-app button { font: inherit; color: inherit; }
.crm-app a { color: inherit; }
.crm-app h1, .crm-app h2, .crm-app h3 { margin: 0; color: var(--c-ink); }
.crm-app p { margin: 0; }
.crm-app input, .crm-app select, .crm-app textarea { font: inherit; color: var(--c-ink); background: var(--c-card); border: 1px solid var(--c-line); border-radius: 10px; padding: 8px 12px; min-height: 42px; max-width: 100%; }
.crm-app textarea { resize: vertical; min-height: 84px; }
.crm-app input[type=checkbox] { min-height: 0; width: 17px; height: 17px; accent-color: var(--c-green); margin: 0; padding: 0; }
.crm-app :focus-visible { outline: 2px solid var(--c-green); outline-offset: 2px; }
.c-i { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.c-serif { font-family: var(--c-serif); font-weight: 500; letter-spacing: -0.005em; }
.c-muted { color: var(--c-muted); }
.c-small { font-size: 14px; }
.c-block { display: block; }
.c-error { color: var(--c-red); font-size: 15px; }
.c-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.c-row.between { justify-content: space-between; }
.c-row.tiny { font-size: 13px; gap: 8px; }
.c-grow { flex: 1; min-width: 0; }
.c-pre { white-space: pre-wrap; }
.c-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c-clamp4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Sidebar ── */
.c-side { display: flex; flex-direction: column; background: var(--c-side); border-right: 1px solid var(--c-hair); padding: 30px 13px 26px; overflow-y: auto; }
.c-side-brand { display: block; padding: 0 19px; margin-bottom: 44px; text-decoration: none; }
.c-wordmark { font-family: var(--c-serif); font-size: 32px; font-weight: 500; letter-spacing: -0.02em; color: var(--c-green); line-height: 1; }
.crm-app:not(.share) .c-wordmark { color: #1B3D33; }
@media (prefers-color-scheme: dark) { .crm-app:not(.share) .c-wordmark { color: var(--c-green); } }
.c-nav, .c-side-foot { display: flex; flex-direction: column; gap: 10px; }
.c-side-foot { margin-top: auto; gap: 6px; }
.c-side-search { display: flex; align-items: center; gap: 12px; margin: 24px 6px 0; padding: 24px 12px 0; white-space: nowrap; border: 0; border-top: 1px solid var(--c-line); background: none; cursor: pointer; font-size: 15.5px; color: var(--c-muted); text-align: left; }
.c-side-search .c-i { width: 23px; height: 23px; color: #4E534F; }
.c-side-search span { flex: 1; }
.c-side-search kbd { font: inherit; font-size: 13.5px; color: var(--c-faint); }
.c-side-search:hover span { color: var(--c-ink); }
.c-palette-wrap { padding-top: 14vh; }
.c-palette { width: min(620px, 100%); background: var(--c-panel); border: 1px solid var(--c-line); border-radius: 14px; box-shadow: 0 18px 44px var(--c-shadow); padding: 12px; }
.c-palette .c-search { margin: 0; }
.c-hits { list-style: none; margin: 8px 0 0; padding: 0; max-height: 52vh; overflow-y: auto; }
.c-hits button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: none; cursor: pointer; text-align: left; }
.c-hits button.on { background: var(--c-tint); }
.c-hit-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.c-hit-text .c-serif { font-size: 17px; }
.c-nohit { padding: 10px; }
.c-side a:not(.c-side-brand) { display: flex; align-items: center; gap: 19px; height: 56px; padding: 0 22px; border-radius: 10px; text-decoration: none; font-size: 19px; color: #2E3330; }
@media (prefers-color-scheme: dark) { .c-side a:not(.c-side-brand) { color: var(--c-ink); } }
.c-side a .c-i { width: 27px; height: 27px; color: #4E534F; stroke-width: 1.45; }
.c-side a:hover { background: rgba(31, 74, 61, 0.05); }
.c-side a.on { background: var(--c-nav-on); color: var(--c-ink); }
.c-side a.c-back { height: 44px; font-size: 15px; color: var(--c-muted); }
.c-side a.c-back .c-i { width: 22px; height: 22px; }
.c-count { margin-left: auto; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 99px; background: var(--c-red); color: #fff; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }

/* ── Main ── */
.c-main { overflow-y: auto; min-width: 0; }
.c-page { max-width: 842px; padding: 26px 26px 48px 40px; }
.c-page.wide { max-width: 1240px; }
.with-panel .c-page.wide { max-width: none; }
.c-banner { padding: 10px 40px; background: var(--c-red-soft); }
.c-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
.c-head h1 { font-family: var(--c-serif); font-size: 50px; line-height: 1.12; font-weight: 500; letter-spacing: -0.025em; }
.c-head p { margin-top: 4px; font-size: 19px; color: var(--c-muted); }
.c-head .c-btn { margin-top: 16px; }

.c-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 46px; padding: 0 24px; border-radius: 10px; border: 1px solid var(--c-line); background: var(--c-card); font-size: 16px; font-weight: 500; cursor: pointer; white-space: nowrap; text-decoration: none; }
.c-btn:hover { background: var(--c-field); }
.c-btn.primary { background: var(--c-green); border-color: var(--c-green); color: var(--c-on-green); font-size: 18.5px; font-weight: 400; box-shadow: 0 1px 2px var(--c-shadow); }
.c-btn.primary:hover { background: var(--c-green-hover); }
.c-btn.primary .c-i { width: 22px; height: 22px; stroke-width: 1.8; }
.c-btn.small { height: 38px; padding: 0 16px; font-size: 15px; }
.c-btn.wide { width: 100%; }
.c-btn[disabled] { opacity: 0.5; cursor: default; }
.c-link { background: none; border: 0; padding: 0; color: var(--c-green); font-weight: 500; cursor: pointer; text-decoration: none; }
.c-link:hover { text-decoration: underline; }
.c-link.small { font-size: 14px; }
.c-link.plain { color: var(--c-ink); font-weight: inherit; font-family: inherit; }
@media (prefers-color-scheme: dark) { .c-link { color: var(--c-gold); } }
.c-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 99px; border: 0; background: none; cursor: pointer; color: var(--c-muted); }
.c-iconbtn:hover { background: var(--c-field); }

.c-search { display: flex; flex-direction: row; align-items: center; gap: 12px; height: 49px; padding: 0 16px; border-radius: 12px; background: var(--c-field); border: 1px solid var(--c-line); margin-bottom: 29px; color: var(--c-muted); }
.c-search input { flex: 1; border: 0; background: none; padding: 0; min-height: 0; height: 100%; font-size: 17.5px; outline: none; }
.c-search input::placeholder { color: #85877F; }
.c-search:focus-within { border-color: var(--c-green); }
.crm-app .c-search input:focus-visible { outline: none; }

.c-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 38px; }
.c-chip { height: 40px; padding: 0 15px; border-radius: 99px; border: 1px solid #DBD7CE; background: var(--c-card); font-size: 16px; color: #3B403C; cursor: pointer; }
.c-chip:hover { border-color: #C9C4B9; }
.c-chip.on { background: var(--c-green); border-color: var(--c-green); color: var(--c-on-green); }
.c-chip.small { height: 34px; padding: 0 13px; font-size: 14px; }
.c-chip.ghost { display: inline-flex; align-items: center; justify-content: center; width: 40px; padding: 0; color: var(--c-muted); background: none; }
.c-chip.ghost .c-i { width: 20px; height: 20px; }
.c-chip.on-ghost { border-color: var(--c-green); color: var(--c-green); }
@media (prefers-color-scheme: dark) { .c-chip { color: var(--c-ink); border-color: var(--c-line); } }
.c-more { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: -22px 0 28px; }
.c-more select { min-height: 38px; padding: 6px 10px; font-size: 15px; }

/* ── The People table ── */
.c-table { display: flex; flex-direction: column; }
.c-tr { padding-top: 8px !important; padding-bottom: 8px !important; display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1.1fr) 112px minmax(0, 1.55fr) 22px; align-items: center; gap: 10px; min-height: 69px; padding: 0 0; border: 0; border-bottom: 1px solid var(--c-hair); background: none; text-align: left; width: 100%; cursor: pointer; }
.c-table.share .c-tr { grid-template-columns: minmax(0, 1.8fr) 130px 110px minmax(0, 1.8fr) 90px; cursor: default; }
.c-tr:not(.c-th):hover { background: rgba(31, 74, 61, 0.035); }
.c-tr.on { background: var(--c-tint); border-radius: 10px; border-bottom-color: transparent; margin: 0 -14px; padding: 0 14px; width: calc(100% + 28px); }
.c-th { min-height: 0; padding-bottom: 12px; cursor: default; font-size: 15.5px; color: var(--c-muted); border-bottom: 0; }
.c-name { display: flex; align-items: center; gap: 18px; min-width: 0; font-size: 19.5px; }
.c-name > span:last-child { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; }
.c-org { font-size: 15.5px; color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-chev { color: var(--c-muted); display: flex; }
.c-chev .c-i { width: 22px; height: 22px; }
.c-next { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.c-next-a { font-size: 16.5px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.c-due { font-size: 15.5px; color: var(--c-gold); white-space: nowrap; }
.c-due.late { color: var(--c-red); }
.c-empty, .c-foot { padding: 18px 0; color: var(--c-muted); font-size: 15px; }

.c-av { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 99px; font-family: var(--c-sans); font-weight: 500; letter-spacing: 0.02em; }
.c-av-s { width: 36px; height: 36px; font-size: 13px; }
.c-av-m { width: 48px; height: 48px; font-size: 17px; }
.c-av-l { width: 92px; height: 92px; font-size: 30px; }
.c-av.t0 { background: #E9E7E1; color: #3C403C; }
.c-av.t1 { background: #E1E8E0; color: #34503F; }
.c-av.t2 { background: #F1E6D6; color: #74522A; }
.c-av.t3 { background: #E3E6EC; color: #3D4A5C; }
.c-av.t4 { background: #EEE1DE; color: #6E4038; }
@media (prefers-color-scheme: dark) { .c-av { filter: brightness(0.72) contrast(1.15); } }

.c-pill { display: inline-flex; align-items: center; height: 31px; padding: 0 12px; border-radius: 8px; font-size: 14.5px; white-space: nowrap; }
.c-pill.green { background: var(--c-pill-green); color: var(--c-pill-green-ink); }
.c-pill.amber { background: var(--c-pill-amber); color: var(--c-pill-amber-ink); }
.c-pill.blue { background: var(--c-pill-blue); color: var(--c-pill-blue-ink); }
.c-pill.grey { background: var(--c-pill-grey); color: var(--c-pill-grey-ink); }

/* ── The person panel ── */
.c-panel { position: relative; overflow-y: auto; background: var(--c-panel); border-left: 1px solid var(--c-hair); padding: 88px 28px 28px; display: flex; flex-direction: column; gap: 0; }
.c-close { position: absolute; top: 25px; right: 22px; }
.c-close .c-i { width: 26px; height: 26px; }
.c-panel-title { font-family: var(--c-serif); font-size: 30px; font-weight: 500; margin-bottom: 18px; }
.c-who { display: flex; gap: 23px; align-items: flex-start; margin-bottom: 26px; }
.c-who-text { flex: 1; min-width: 0; padding-top: 5px; }
.c-who h2 { font-size: 34px; line-height: 1.15; font-weight: 500; letter-spacing: -0.02em; }
.c-roles { margin-top: 5px; font-size: 18.5px; color: var(--c-muted); line-height: 1.35; }
.c-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.c-tag { display: inline-flex; align-items: center; height: 31px; padding: 0 12px; border-radius: 99px; background: var(--c-pill-grey); font-size: 15.5px; color: #3D423E; border: 0; }
@media (prefers-color-scheme: dark) { .c-tag { color: var(--c-ink); } }
.c-tag.add { width: 31px; padding: 0; justify-content: center; cursor: pointer; color: var(--c-muted); }
.c-tag.add .c-i { width: 17px; height: 17px; }
.c-tag-input { height: 31px !important; min-height: 0 !important; width: 120px; border-radius: 99px !important; padding: 0 12px !important; font-size: 15px; }
.c-menuwrap { position: relative; margin-top: 10px; }
.c-menu { position: absolute; right: 0; top: 40px; z-index: 5; width: 210px; background: var(--c-card); border: 1px solid var(--c-line); border-radius: 10px; box-shadow: 0 10px 28px var(--c-shadow); padding: 6px; }
.c-menu button { display: block; width: 100%; text-align: left; padding: 9px 11px; border: 0; background: none; border-radius: 7px; cursor: pointer; font-size: 15px; }
.c-menu button:hover { background: var(--c-field); }

.c-facts { list-style: none; margin: 0 0 0; padding: 0 0 22px; border-bottom: 1px solid var(--c-line); display: flex; flex-direction: column; gap: 14px; }
.c-facts li { display: flex; align-items: center; gap: 24px; font-size: 16.5px; min-width: 0; }
.c-facts li .c-i { margin-left: 4px; width: 25px; height: 25px; color: #3E433F; }
@media (prefers-color-scheme: dark) { .c-facts li .c-i { color: var(--c-muted); } }
.c-facts a { text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-facts a:hover { text-decoration: underline; }

.c-nextcard { position: relative; display: flex; gap: 14px; margin: 22px 0 34px; padding: 20px 56px 18px 18px; border-radius: 12px; background: #F0EDE7; }
@media (prefers-color-scheme: dark) { .c-nextcard { background: var(--c-field); } }
.c-nextcard.late { background: var(--c-red-soft); }
.c-nextcard > .c-i { color: #3E433F; margin-top: 2px; }
.c-nextcard > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.c-nextcard-k { font-size: 16.5px; }
.c-nextcard-a { font-size: 17px; }
.c-nextcard .c-due { font-size: 16.5px; margin-top: 2px; }
.c-nextcard .c-link { align-self: flex-start; margin-top: 6px; }
.c-nextcard .c-tick { position: absolute; right: 18px; top: 41px; }
.c-tick { flex: none; width: 24px; height: 24px; border-radius: 99px; border: 1.6px solid #8E918B; background: transparent; cursor: pointer; padding: 0; transition: background-color 120ms ease, border-color 120ms ease; }
.c-tick:hover { border-color: var(--c-green); background: radial-gradient(circle, var(--c-green) 0 4px, transparent 5px); }

.c-sec { padding: 0 0 22px; }
.c-sec h3 { font-family: var(--c-serif); font-size: 19px; font-weight: 500; margin-bottom: 5px; }
.c-sec p { font-size: 16.5px; color: var(--c-muted); line-height: 1.5; }
.c-sec > p:first-of-type { color: var(--c-muted); }
.c-iconsec { display: flex; gap: 24px; align-items: flex-start; padding-top: 2px; }
.c-iconsec > .c-i { margin-top: 2px; margin-left: 4px; color: #3E433F; }
@media (prefers-color-scheme: dark) { .c-iconsec > .c-i { color: var(--c-muted); } }
.c-iconsec p:first-of-type { color: var(--c-ink); }
.c-iconsec .c-muted { color: var(--c-muted) !important; }
.c-sec:first-of-type { border-bottom: 1px solid var(--c-line); margin-bottom: 22px; }
.c-oppcard { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 10px; padding: 14px 16px 14px 13px; border-radius: 10px; border: 1px solid var(--c-line); background: var(--c-card); text-align: left; cursor: pointer; }
.c-oppcard > span { display: flex; flex-direction: column; gap: 3px; font-size: 16.5px; }
.c-oppcard b { font-weight: 400; }
.c-oppcard .c-muted { font-size: 15.5px; }
.c-oppcard .c-i { color: var(--c-muted); width: 22px; height: 22px; }
.c-oppcard:hover { border-color: #CFCAC0; }
.c-log { list-style: none; padding: 0; margin: 8px 0 0; }
.c-log li { border-top: 1px solid var(--c-hair); padding: 9px 0; }
.c-log p { font-size: 14.5px; margin-top: 3px; color: var(--c-ink) !important; }
.c-author { display: inline-flex; height: 20px; align-items: center; padding: 0 7px; border-radius: 5px; font-size: 12px; background: var(--c-pill-green); color: var(--c-pill-green-ink); }
.c-author.claude { background: var(--c-pill-amber); color: var(--c-pill-amber-ink); }
.c-addnote { position: sticky; bottom: 0; margin-top: auto; height: 52px; font-size: 19px; box-shadow: 0 -14px 18px -6px var(--c-panel), 0 1px 2px var(--c-shadow); flex: none; }
.c-addnote .c-i { width: 23px; height: 23px; }

.c-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.c-edit .wide { grid-column: 1 / -1; }
.c-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.c-field input, .c-field select, .c-field textarea { width: 100%; }
.c-label { font-size: 13.5px; color: var(--c-muted); }
.c-check { display: inline-flex; flex-direction: row; align-items: center; color: var(--c-ink); gap: 9px; font-size: 15px; }

/* ── To-dos ── */
.c-group { margin-bottom: 30px; }
.c-group h2 { font-family: var(--c-serif); font-size: 24px; font-weight: 500; margin-bottom: 10px; }
.c-group h2 span { font-family: var(--c-sans); font-size: 15px; color: var(--c-muted); font-weight: 400; margin-left: 6px; }
.c-group h2.late { color: var(--c-red); }
.c-group > p { margin: -4px 0 10px; }
.c-first summary { cursor: pointer; list-style: none; }
.c-first summary::-webkit-details-marker { display: none; }
.c-first summary h2::before { content: '▸ '; color: var(--c-muted); }
.c-first[open] summary h2::before { content: '▾ '; }
.c-todos { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-hair); }
.c-todo { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto 44px; gap: 16px; align-items: center; padding: 12px 6px; border-bottom: 1px solid var(--c-hair); }
.c-todo.on { background: var(--c-tint); border-radius: 10px; }
.c-todo-main { display: flex; align-items: center; gap: 14px; border: 0; background: none; text-align: left; cursor: pointer; min-width: 0; padding: 0; }
.c-todo-text { display: flex; flex-direction: column; min-width: 0; }
.c-todo-a { font-size: 16.5px; }
.c-todo-text .c-muted { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-todo-name { font-size: 15.5px; color: var(--c-ink); }
.c-cold { font-size: 13.5px; color: var(--c-gold); }
.c-move { opacity: 0.75; }
.c-todo:hover .c-move { opacity: 1; }

/* ── Opportunities and Settings ── */
.c-card { background: var(--c-card); border: 1px solid var(--c-line); border-radius: 12px; padding: 18px 20px; margin-bottom: 16px; }
.c-card h3 { font-family: var(--c-serif); font-size: 21px; font-weight: 500; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.c-card h3 .c-i { width: 22px; height: 22px; color: var(--c-muted); }
.c-card > p + p { margin-top: 6px; }
.c-card .c-row { margin-top: 12px; }
.c-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 14px; margin-bottom: 16px; }
.c-kpis .c-card { margin: 0; display: flex; flex-direction: column; gap: 3px; }
.c-kpis b { font-family: var(--c-serif); font-size: 34px; font-weight: 500; line-height: 1.15; }
.c-warn { background: var(--c-pill-amber); border-color: transparent; color: var(--c-pill-amber-ink); }
.c-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.c-bar { margin: 12px 0; font-size: 15.5px; }
.c-track { height: 8px; border-radius: 99px; background: var(--c-pill-grey); overflow: hidden; margin-top: 7px; }
.c-track span { display: block; height: 100%; background: var(--c-green); border-radius: 99px; }
.c-boardhead { margin: 18px 0 12px; }
.c-boardhead h2 { font-size: 28px; }
.c-boardhead select { min-height: 38px; padding: 6px 10px; font-size: 15px; }
.c-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 18px; }
.c-col { background: var(--c-side); border: 1px solid var(--c-hair); border-radius: 12px; padding: 12px; min-height: 160px; }
.c-col.dropping { border-style: dashed; border-color: var(--c-line); }
.c-col h3 { font-family: var(--c-serif); font-size: 17px; font-weight: 500; margin-bottom: 10px; }
.c-col h3 .c-muted, .c-col h3 .c-due { font-family: var(--c-sans); font-size: 13.5px; }
.c-kcard { display: flex; flex-direction: column; gap: 4px; padding: 11px 12px; margin-bottom: 9px; border-radius: 10px; border: 1px solid var(--c-line); background: var(--c-card); cursor: grab; }
.c-kcard:hover { border-color: #CFCAC0; }
.c-kcard b { font-size: 16.5px; }
.c-kcard .c-pill { height: 24px; font-size: 12.5px; padding: 0 8px; }
.c-kcard .c-due { font-size: 13.5px; }
.c-shares { list-style: none; padding: 0; margin: 12px 0 0; }
.c-shares li { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 9px 0; border-top: 1px solid var(--c-hair); font-size: 15px; }
.c-share-brand { margin: 8px 0 26px; }
.c-sharetitle { font-size: 28px; margin: 22px 0 12px; }

/* ── Dialogs ── */
.c-modal { position: fixed; inset: 0; z-index: 30; background: rgba(15, 25, 20, 0.32); display: flex; align-items: flex-start; justify-content: center; padding: 9vh 16px 16px; overflow-y: auto; }
.c-dialog { width: min(560px, 100%); background: var(--c-panel); border: 1px solid var(--c-line); border-radius: 14px; box-shadow: 0 18px 44px var(--c-shadow); padding: 20px 22px 22px; }
.c-dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.c-dialog-head h2 { font-family: var(--c-serif); font-size: 24px; font-weight: 500; line-height: 1.2; }
.c-form-stack { display: flex; flex-direction: column; gap: 14px; }
.c-was { padding: 10px 12px; background: var(--c-field); border-radius: 10px; font-size: 15.5px; }
.c-dues { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.c-dues input { width: auto; }
.c-seg { display: flex; gap: 4px; padding: 4px; background: var(--c-field); border-radius: 11px; }
.c-seg button { flex: 1; height: 38px; border: 0; border-radius: 8px; background: none; cursor: pointer; font-size: 15px; color: var(--c-muted); }
.c-seg button.on { background: var(--c-card); color: var(--c-ink); box-shadow: 0 1px 3px var(--c-shadow); }

/* ── Narrower screens: the panel slides over the list, then the sidebar becomes a top bar ── */
@media (max-width: 1239px) {
  .crm-app.with-panel { grid-template-columns: var(--c-side-w) minmax(0, 1fr); }
  .c-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(var(--c-panel-w), 100vw); z-index: 20; box-shadow: -14px 0 36px var(--c-shadow); }
}
@media (max-width: 900px) {
  .crm-app, .crm-app.with-panel { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .c-side { flex-direction: row; align-items: center; gap: 4px; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--c-hair); overflow-x: auto; }
  .c-side-brand { margin: 0 8px 0 4px; padding: 0; }
  .c-wordmark { font-size: 24px; }
  .c-nav, .c-side-foot { flex-direction: row; gap: 2px; margin: 0; }
  .c-side-foot { margin-left: auto; }
  .c-side a:not(.c-side-brand) { height: 40px; padding: 0 10px; gap: 7px; font-size: 15px; }
  .c-side a .c-i { width: 21px; height: 21px; }
  .c-side a.c-back span { display: none; }
  .c-side-search { margin: 0 0 0 4px; padding: 0 8px; border-top: 0; height: 40px; }
  .c-side-search span, .c-side-search kbd { display: none; }
  .c-page { padding: 20px 16px 40px; }
  .c-head h1 { font-size: 38px; }
  .c-head p { font-size: 16px; }
  .c-tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 18px; }
  .c-tr > :nth-child(2), .c-tr > :nth-child(3) { display: none; }
  .c-table.share .c-tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .c-table.share .c-tr > :nth-child(5) { display: none; }
  .c-name { gap: 12px; font-size: 17px; }
  .c-av-m { width: 40px; height: 40px; font-size: 14px; }
  .c-chips { gap: 8px; margin-bottom: 24px; }
  .c-chip { height: 36px; padding: 0 14px; font-size: 15px; }
  .c-twocol { grid-template-columns: 1fr; }
  .c-panel { padding: 72px 18px 22px; }
  .c-who { gap: 16px; }
  .c-av-l { width: 72px; height: 72px; font-size: 24px; }
  .c-who h2 { font-size: 28px; }
  .c-edit { grid-template-columns: 1fr; }
  .c-todo { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .c-todo .c-move { display: none; }
}
@media (max-width: 520px) {
  .c-nav a span, .c-side-foot a span { display: none; }
  .c-head { flex-direction: column; }
  .c-head .c-btn { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .c-tick { transition: none; } }