:root {
  --client-paper: #fbfbf8;
  --client-desk: #e8e1cf;
  --client-ink: #242321;
  --client-muted: #77736c;
  --client-line: rgba(36, 35, 33, .16);
  --client-accent: #8c604c;
  --client-shadow: 0 2px 4px rgba(64, 56, 42, .025), 0 16px 24px -18px rgba(64, 56, 42, .28);
}

* { box-sizing: border-box; }
html { color-scheme: light; background: var(--client-desk); }
body { margin: 0; min-width: 320px; color: var(--client-ink); background: var(--client-desk); font-family: var(--archive-serif, "Noto Serif SC", "Songti SC", serif); font-synthesis: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--client-accent); outline-offset: 3px; }
[hidden] { display: none !important; }

.workspace-shell { width: min(1180px, 100%); margin: 0 auto; padding: 0 24px 64px; }
.workspace-header { height: 82px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; border-bottom: 1px solid var(--client-line); }
.wordmark { justify-self: start; line-height: 1.4; text-decoration: none; }
.wordmark strong { display: block; font-size: 20px; letter-spacing: .14em; font-weight: 600; }
.wordmark span { display: block; margin-top: 3px; color: var(--client-muted); font: 10px/1 var(--archive-mono, "Courier New", monospace); letter-spacing: .08em; }
.workspace-header nav { display: flex; gap: 21px; color: var(--client-muted); font-size: 13px; }
.workspace-header nav a { padding: 10px 0; text-decoration: none; }
.workspace-header nav a:hover { color: var(--client-ink); }

.workspace-title { display: flex; justify-content: space-between; gap: 42px; padding: 34px 0 26px; }
.eyebrow { margin: 0 0 11px; color: var(--client-muted); font: 11px/1.4 var(--archive-sans, sans-serif); letter-spacing: 2px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 13px; font-size: clamp(34px, 5vw, 48px); line-height: 1.25; letter-spacing: -.03em; font-weight: 600; }
.workspace-title p:not(.eyebrow) { max-width: 510px; margin-bottom: 0; color: var(--client-muted); font-size: 14px; line-height: 1.9; }
.workspace-summary { display: flex; align-items: end; gap: 28px; padding-bottom: 2px; color: var(--client-muted); font-size: 11px; white-space: nowrap; }
.workspace-summary strong { display: block; margin-top: 7px; color: var(--client-ink); font-size: 16px; font-weight: 500; }
.workspace-plan { display: flex; justify-content: space-between; gap: 18px; align-items: center; margin: -9px 0 25px; border-top: 1px solid var(--client-line); border-bottom: 1px solid var(--client-line); padding: 13px 0; color: var(--client-muted); font-size: 12px; line-height: 1.7; }
.workspace-plan strong { color: var(--client-ink); font-weight: 500; }
.workspace-plan-copy { display: grid; gap: 2px; }
.workspace-plan-copy small { color: var(--client-muted); font-size: 11px; }
.workspace-plan-action { flex: none; border: 0; border-bottom: 1px solid rgba(140, 96, 76, .38); background: transparent; padding: 5px 0; color: var(--client-accent); font-size: 12px; }
.workspace-message { margin: 0 0 20px; padding: 10px 13px; border-left: 2px solid var(--client-accent); color: var(--client-muted); font-size: 12px; line-height: 1.7; }
.workspace-message[hidden], .form-error[hidden] { display: none; }

.workspace-dashboard { margin: 0 0 24px; background: var(--client-paper); box-shadow: var(--client-shadow); padding: 30px clamp(22px, 4vw, 42px) 0; }
.dashboard-heading { display: flex; justify-content: space-between; gap: 28px; align-items: flex-start; padding-bottom: 26px; border-bottom: 1px solid var(--client-line); }
.dashboard-heading h2 { margin: 0 0 8px; font-size: 27px; line-height: 1.35; font-weight: 500; letter-spacing: -.02em; }
.dashboard-heading p:not(.eyebrow) { margin: 0; color: var(--client-muted); font-size: 13px; line-height: 1.8; }
.dashboard-heading-actions { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.period-switch { display: flex; gap: 17px; align-items: center; border-bottom: 1px solid var(--client-line); }
.period-tab { border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; padding: 7px 0 9px; color: var(--client-muted); font-size: 12px; }
.period-tab.is-active { border-bottom-color: var(--client-accent); color: var(--client-ink); }
.dashboard-new-client { min-height: 38px; padding: 8px 13px; font-size: 12px; }
.dashboard-new-client span { margin-left: 4px; font-size: 15px; }
.dashboard-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 22px 0 23px; border-bottom: 1px solid var(--client-line); }
.dashboard-metric { min-width: 0; padding: 0 18px; border-left: 1px solid var(--client-line); }
.dashboard-metric:first-child { padding-left: 0; border-left: 0; }
.dashboard-metric span, .dashboard-metric small { display: block; color: var(--client-muted); font-size: 11px; line-height: 1.5; }
.dashboard-metric strong { display: block; margin: 7px 0 4px; font-size: 27px; line-height: 1; font-weight: 500; letter-spacing: -.03em; }
.dashboard-metric small { font-size: 10px; line-height: 1.6; white-space: nowrap; }
.dashboard-lower { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: 0; }
.dashboard-section { min-width: 0; padding: 25px 26px 27px 0; }
.dashboard-section + .dashboard-section { border-left: 1px solid var(--client-line); padding: 25px 0 27px 27px; }
.dashboard-section-heading { display: flex; justify-content: space-between; gap: 18px; align-items: flex-end; }
.dashboard-section-heading .eyebrow { margin-bottom: 6px; }
.dashboard-section-heading h3 { margin: 0; font-size: 17px; line-height: 1.4; font-weight: 500; }
.dashboard-period-label { color: var(--client-muted); font: 10px/1.4 var(--archive-sans, sans-serif); white-space: nowrap; }
.dashboard-section-copy { margin: 12px 0 0; color: var(--client-muted); font-size: 11px; line-height: 1.7; }
.activity-list, .attention-list { margin-top: 16px; }
.activity-row, .attention-row { width: 100%; display: grid; grid-template-columns: 48px minmax(0, 1fr) 14px; gap: 13px; align-items: center; border: 0; border-top: 1px solid var(--client-line); background: transparent; padding: 12px 0; text-align: left; text-decoration: none; }
.activity-row:hover, .attention-row:hover { color: var(--client-accent); }
.activity-date { color: var(--client-muted); font: 10px/1.4 var(--archive-sans, sans-serif); }
.activity-main, .attention-row span { min-width: 0; }
.activity-main strong, .attention-row strong { display: block; overflow: hidden; font-size: 13px; line-height: 1.5; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.activity-main small, .attention-row small { display: block; overflow: hidden; margin-top: 3px; color: var(--client-muted); font-size: 11px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.activity-row b, .attention-row b { color: var(--client-accent); font-size: 17px; font-weight: 400; }
.dashboard-empty { border-top: 1px solid var(--client-line); padding: 20px 0 8px; color: var(--client-muted); font-size: 12px; line-height: 1.8; }
.dashboard-empty p { margin: 0; }
.dashboard-inline-action { border: 0; border-bottom: 1px solid rgba(140, 96, 76, .38); margin-top: 10px; background: transparent; padding: 3px 0; color: var(--client-accent); font-size: 11px; }

.workspace-grid { display: grid; grid-template-columns: minmax(260px, 330px) minmax(0, 1fr); gap: 24px; align-items: start; }
.client-panel, .detail-panel { min-height: 0; background: var(--client-paper); box-shadow: var(--client-shadow); }
.client-panel { padding: 27px 25px 30px; }
.detail-panel { padding: 31px clamp(24px, 4vw, 48px) 40px; }
.panel-heading, .detail-heading, .block-heading { display: flex; justify-content: space-between; gap: 18px; align-items: start; }
.panel-heading h2, .detail-heading h2 { margin: 0; font-size: 25px; line-height: 1.35; font-weight: 500; }
.button { border: 0; border-radius: 0; background: transparent; padding: 8px 0; font-size: 12px; line-height: 1.5; }
.button-action { color: var(--client-accent); white-space: nowrap; }
.button-action span { margin-left: 5px; font-size: 17px; vertical-align: -1px; }
.button-dark { min-height: 45px; padding: 11px 18px; border: 1px solid var(--client-ink); background: var(--client-ink); color: var(--client-paper); }
.button-light { padding: 8px 0; color: var(--client-accent); border-bottom: 1px solid rgba(140, 96, 76, .38); }
.button:disabled { cursor: default; opacity: .42; }

.search-field { display: block; margin: 25px 0 12px; }
.search-field input { width: 100%; min-height: 40px; border: 0; border-bottom: 1px solid var(--client-line); border-radius: 0; outline: 0; background: transparent; padding: 8px 0; font-size: 14px; }
.search-field input::placeholder { color: #9a958d; }
.search-field input:focus { border-bottom-color: var(--client-accent); box-shadow: none; }
.client-list { display: grid; }
.client-row { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 14px; border: 0; border-bottom: 1px solid var(--client-line); border-left: 2px solid transparent; padding: 15px 4px 15px 10px; background: transparent; text-align: left; }
.client-row:hover { background: rgba(232, 225, 207, .36); }
.client-row.is-active { border-left-color: var(--client-accent); background: rgba(232, 225, 207, .52); }
.client-row strong { display: block; font-size: 15px; line-height: 1.5; font-weight: 500; }
.client-row small { display: block; max-width: 210px; overflow: hidden; margin-top: 4px; color: var(--client-muted); font-size: 11px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.client-row b { color: var(--client-accent); font-size: 19px; font-weight: 400; }
.panel-loading, .empty-copy { color: var(--client-muted); font-size: 13px; line-height: 1.9; }

.detail-heading { padding-bottom: 24px; border-bottom: 1px solid var(--client-line); }
.detail-heading h2 { font-size: 31px; letter-spacing: -.02em; }
.detail-heading .alias { margin: 7px 0 0; color: var(--client-muted); font-size: 12px; line-height: 1.7; }
.detail-actions { display: flex; justify-content: flex-end; gap: 18px; align-items: center; flex-wrap: wrap; }
.detail-note { max-width: 680px; margin: 20px 0 0; white-space: pre-wrap; color: var(--client-muted); font-size: 13px; line-height: 1.9; }
.detail-block { padding: 27px 0 25px; border-bottom: 1px solid var(--client-line); }
.detail-block:last-child { border-bottom: 0; }
.block-heading h3 { margin: 0; font-size: 17px; line-height: 1.5; font-weight: 500; }
.block-heading p { margin: 6px 0 0; color: var(--client-muted); font-size: 12px; line-height: 1.7; }
.profile-list, .link-list { display: grid; gap: 0; margin-top: 16px; }
.profile-card, .link-card { display: flex; justify-content: space-between; gap: 18px; align-items: center; border-top: 1px solid var(--client-line); padding: 13px 0; }
.profile-card strong, .link-card strong { display: block; font-size: 14px; line-height: 1.6; font-weight: 500; }
.profile-card small, .link-card small { display: block; margin-top: 4px; color: var(--client-muted); font-size: 11px; line-height: 1.6; }
.link-open { min-width: 0; color: inherit; text-decoration: none; }
.link-open:hover strong { color: var(--client-accent); }
.unlink-button { flex: none; border: 0; background: transparent; color: var(--client-muted); padding: 8px 0; font-size: 11px; }
.unlink-button:hover { color: var(--client-accent); }
.detail-empty { padding: 49px 0 55px; }
.detail-empty h2 { margin-bottom: 12px; font-size: 28px; line-height: 1.4; font-weight: 500; }
.detail-empty p:last-child { max-width: 280px; margin-bottom: 0; color: var(--client-muted); font-size: 13px; line-height: 1.9; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.workspace-dialog { width: min(520px, calc(100% - 32px)); border: 0; border-radius: 0; padding: 0; background: var(--client-paper); color: var(--client-ink); box-shadow: 0 18px 60px rgba(38, 33, 25, .22); }
.workspace-dialog::backdrop { background: rgba(48, 41, 30, .42); }
.workspace-dialog form { padding: 29px 29px 25px; }
.workspace-dialog header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 24px; }
.workspace-dialog header h2 { margin: 0; font-size: 26px; line-height: 1.4; font-weight: 500; }
.dialog-close { border: 0; background: transparent; color: var(--client-muted); padding: 0 0 7px 10px; font-size: 27px; line-height: 1; }
.workspace-dialog label { display: block; margin-top: 17px; color: var(--client-muted); font-size: 12px; line-height: 1.5; }
.workspace-dialog label input, .workspace-dialog label textarea, .workspace-dialog label select { display: block; width: 100%; margin-top: 7px; border: 1px solid var(--client-line); border-radius: 0; outline: 0; background: #f3f0e7; padding: 11px 12px; font-size: 14px; }
.workspace-dialog label textarea { resize: vertical; line-height: 1.8; }
.workspace-dialog label input:focus, .workspace-dialog label textarea:focus, .workspace-dialog label select:focus { border-color: var(--client-accent); box-shadow: none; }
.field-note { color: #9a958d; }
.dialog-copy { color: var(--client-muted); font-size: 13px; line-height: 1.8; }
.workspace-dialog footer { display: flex; justify-content: flex-end; gap: 17px; margin-top: 28px; }
.form-error { margin: 17px 0 0; color: #8e4639; font-size: 12px; line-height: 1.7; }
.record-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.record-filters label { margin-top: 0; }
.record-choices { max-height: 290px; overflow: auto; margin-top: 18px; }
.record-option { display: block; border-top: 1px solid var(--client-line); padding: 12px 2px; cursor: pointer; }
.record-option input { width: auto !important; margin: 0 8px 0 0 !important; padding: 0 !important; vertical-align: middle; accent-color: var(--client-accent); }
.record-option strong { font-size: 13px; line-height: 1.6; font-weight: 500; }
.record-option small { display: block; margin: 4px 0 0 23px; color: var(--client-muted); font-size: 11px; line-height: 1.5; }
.plan-options { display: grid; gap: 10px; margin-top: 23px; }
.plan-option { display: flex; justify-content: space-between; align-items: center; gap: 18px; border: 1px solid var(--client-line); border-radius: 0; background: transparent; padding: 16px 15px; text-align: left; }
.plan-option:hover, .plan-option:focus-visible { border-color: var(--client-accent); background: rgba(232, 225, 207, .35); }
.plan-option span { display: grid; gap: 4px; }
.plan-option strong { font-size: 15px; font-weight: 500; }
.plan-option small { color: var(--client-muted); font-size: 11px; }
.plan-option b { color: var(--client-accent); font-size: 18px; font-weight: 500; white-space: nowrap; }
.plan-option-featured { border-color: rgba(140, 96, 76, .46); }

@media (max-width: 720px) {
  .workspace-shell { width: min(100%, 480px); padding-inline: 20px; }
  .workspace-header { height: 68px; }
  .wordmark strong { font-size: 20px; }
  .workspace-header nav { gap: 13px; font-size: 12px; }
  .workspace-title { display: block; padding: 28px 0 23px; }
  h1 { font-size: 34px; }
  .workspace-summary { align-items: start; gap: 22px; margin-top: 24px; }
  .workspace-plan { align-items: flex-start; margin-top: -4px; }
  .workspace-dashboard { padding: 24px 20px 0; }
  .dashboard-heading { display: block; padding-bottom: 21px; }
  .dashboard-heading h2 { font-size: 23px; }
  .dashboard-heading-actions { justify-content: space-between; margin-top: 22px; }
  .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 21px 0; padding: 21px 0; }
  .dashboard-metric { padding: 0 13px; }
  .dashboard-metric:nth-child(odd) { padding-left: 0; border-left: 0; }
  .dashboard-metric strong { font-size: 25px; }
  .dashboard-metric small { white-space: normal; }
  .dashboard-lower { display: block; }
  .dashboard-section, .dashboard-section + .dashboard-section { padding: 22px 0 24px; border-left: 0; }
  .dashboard-section + .dashboard-section { border-top: 1px solid var(--client-line); }
  .workspace-grid { display: block; }
  .client-panel { min-height: auto; margin-bottom: 17px; padding: 22px 20px 23px; }
  .detail-panel { min-height: 0; padding: 25px 20px 32px; }
  .detail-heading { display: block; }
  .detail-heading h2 { font-size: 28px; }
  .detail-actions { justify-content: flex-start; margin-top: 17px; }
  .detail-empty { padding: 42px 0 48px; }
  .workspace-dialog { width: 100%; max-width: 100%; margin: auto 0 0; }
  .workspace-dialog form { padding: 24px 20px calc(23px + env(safe-area-inset-bottom)); }
}

/* A single useful first step, then a readable workspace once clients exist. */
:root{--client-muted:#6e6a61}
.workspace-welcome{max-width:760px;margin:24px auto 60px;padding:52px clamp(24px,6vw,68px);background:var(--client-paper);border:1px solid var(--client-line)}
.workspace-welcome h2{font-size:30px;font-weight:500;line-height:1.5;margin-bottom:14px}
.workspace-welcome>p:not(.eyebrow){max-width:430px;color:var(--client-muted);font-size:16px;line-height:1.9;margin-bottom:30px}
.workspace-welcome .button{font-size:16px;padding-inline:24px}
.workspace-summary{font-size:13px}
.workspace-plan,.workspace-plan-copy small,.workspace-plan-action{font-size:13px}
.workspace-plan-action{min-height:44px}
.workspace-header nav a{display:flex;align-items:center;min-height:44px;font-size:14px}
.workspace-dashboard,.client-panel,.detail-panel{box-shadow:none;border:1px solid var(--client-line)}
.dashboard-heading{align-items:center;padding-bottom:20px}
.dashboard-heading h2{font-size:25px;margin:0}
.dashboard-heading .eyebrow{margin-bottom:8px}
.period-tab{min-height:44px;font-size:14px}
.dashboard-metric span{font-size:13px}
.dashboard-metric small{font-size:12px}
.dashboard-period-label,.dashboard-section-copy{font-size:12px}
.activity-main strong,.attention-row strong{font-size:15px}
.activity-main small,.attention-row small,.activity-date,.dashboard-empty{font-size:13px}
.attention-row{grid-template-columns:minmax(0,1fr) 14px}
.client-status-filter{display:flex;gap:20px;margin-top:20px;border-bottom:1px solid var(--client-line)}
.client-status-filter button{min-height:44px;border:0;border-bottom:2px solid transparent;background:transparent;font-size:14px;color:var(--client-muted);padding:8px 0}
.client-status-filter [aria-pressed=true]{border-bottom-color:var(--client-accent);color:var(--client-ink)}
.search-field{margin-top:12px}
.search-field input{min-height:46px;font-size:16px}
.client-row{min-height:64px}
.client-row strong{font-size:17px}
.client-row small{font-size:13px}
.button,.unlink-button{min-height:44px;font-size:14px}
.detail-heading{flex-direction:column;gap:18px}
.detail-actions{justify-content:flex-start;gap:10px 20px}
.detail-heading .alias,.detail-note,.profile-card small,.link-card small{font-size:13px;overflow-wrap:anywhere}
.profile-card strong,.link-card strong{font-size:16px;overflow-wrap:anywhere}
.client-back{display:none}
.workspace-dialog{max-height:90dvh;overflow:auto}
.workspace-dialog label{font-size:14px}
.workspace-dialog label input,.workspace-dialog label textarea,.workspace-dialog label select{font-size:16px;min-height:46px}
.workspace-dialog .dialog-close{min-width:44px;min-height:44px;padding:0;font-size:28px}
.workspace-dialog header{align-items:center;gap:16px}
.workspace-dialog footer{position:sticky;bottom:-25px;background:var(--client-paper);padding:14px 0 0;isolation:isolate}
.record-option strong{font-size:15px}
.record-option small{font-size:13px}
@media(min-width:1000px){.workspace-grid{grid-template-columns:300px minmax(0,1fr)}.client-panel{position:sticky;top:24px}.client-list{max-height:65dvh;overflow:auto}}
@media(max-width:720px){
  .workspace-shell{width:100%;max-width:580px;padding-inline:16px}
  .workspace-header{height:auto;min-height:72px;padding-top:env(safe-area-inset-top);gap:12px}
  .workspace-header nav{gap:14px}
  .workspace-header nav a{font-size:13px}
  .workspace-welcome{margin:8px 0 24px;padding:30px 24px}
  .workspace-welcome h2{font-size:25px}
  .workspace-welcome>p:not(.eyebrow){font-size:15px}
  .workspace-title{padding:24px 0}
  .workspace-title h1{font-size:32px}
  .workspace-summary{gap:28px;margin-top:20px}
  .workspace-dashboard{padding:20px 18px 0}
  .dashboard-heading{display:flex;gap:12px}
  .dashboard-heading h2{font-size:21px}
  .dashboard-heading-actions{margin:0}
  .period-switch{gap:14px}
  .dashboard-metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 0}
  .dashboard-metric{padding-inline:10px;border-left:1px solid var(--client-line)}
  .dashboard-metric:nth-child(odd){padding-left:10px;border-left:1px solid var(--client-line)}
  .dashboard-metric:nth-child(3n+1){padding-left:0;border-left:0}
  .dashboard-metric small{display:none}
  .dashboard-metric strong{font-size:27px}
  .dashboard-lower{display:block}
  .dashboard-section,.dashboard-section + .dashboard-section{padding-block:18px}
  .client-panel{margin:0;padding:20px 18px}
  .detail-panel{display:none}
  .is-client-open .workspace-title,.is-client-open .workspace-plan,.is-client-open .workspace-dashboard,.is-client-open .client-panel{display:none}
  .is-client-open .workspace-grid{margin-top:18px}
  .is-client-open .detail-panel{display:block;padding:14px 20px 28px}
  .client-back{display:inline-flex;align-items:center;min-height:44px;margin:0 0 18px;border:0;background:transparent;padding:0;color:var(--client-accent);font-size:14px}
  .detail-heading{display:flex}
  .detail-actions{margin:0;gap:8px 18px}
  .detail-heading h2{font-size:29px}
  .workspace-dialog footer{bottom:calc(-23px - env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.dashboard-more>summary{min-height:52px;padding:15px 0;display:flex;align-items:center;justify-content:space-between;color:var(--client-accent);font-size:14px;cursor:pointer;list-style:none}
.dashboard-more>summary::-webkit-details-marker{display:none}
.dashboard-more[open]>summary{border-bottom:1px solid var(--client-line)}
.dashboard-more[open]>summary span{transform:rotate(45deg)}
@media(max-width:720px){.workspace-shell>main{display:flex;flex-direction:column}.workspace-title{order:0}.workspace-plan{order:1}.workspace-message{order:2}.workspace-welcome{order:3}.workspace-grid{order:4;margin-bottom:20px}.workspace-dashboard{order:5}.is-client-open .workspace-grid{margin-bottom:0}}