/* Client projects, intakes, proposals, deliverables and the UI-18 client work pages on Cofello Warm
   (redesign phase 5b). Tokens only. Shared looks: .cf-page-header, .cf-btn, .cf-input, .cf-field__label, .cf-card,
   .cf-notice, .cf-tabs, .cf-rail, .cf-chip, .cf-state, .cf-row (shell.css).
   The .client-projects rules start at #app. The legacy shell.css domain adapter was deleted at
   integration (integration/redesign-p56) with no computed-style change on this page. */

/* ---- Project, intake and prospect-start pages (.client-projects) ---- */
.client-projects{color-scheme:light;box-sizing:border-box;max-width:var(--cf-content-max);margin:0 auto;padding:var(--cf-space-10) var(--cf-space-6);font-family:var(--cf-font-sans);font-size:var(--cf-text-md);line-height:var(--cf-leading-md);color:var(--cf-color-ink);background:var(--cf-color-paper);overflow-wrap:anywhere}
.client-projects *{box-sizing:border-box;min-width:0} /* min-width:0 lets the six step tabs share rows evenly on phones (3+3 at 390, 2+2+2 at 320), as the deleted shell.css adapter did */
#app .client-projects{container:domain / inline-size;color-scheme:light;max-width:var(--cf-content-max);margin:0 auto;padding:0;border-radius:0;background:transparent;color:var(--cf-color-ink);font-family:var(--cf-font-sans);font-size:var(--cf-text-md);line-height:var(--cf-leading-md)}
#app .client-projects p{margin:var(--cf-space-2) 0}
#app .client-projects a{color:var(--cf-color-accent-strong);text-underline-offset:3px}
#app .client-projects strong{font-weight:var(--cf-weight-bold);color:var(--cf-color-ink)}

/* Page header: eyebrow, mode badge, serif H1, status (.cf-page-header). */
#app .client-projects .cp-heading{margin:0 0 var(--cf-space-8);padding:0 0 var(--cf-space-6);border-bottom:0}
#app .client-projects .cp-heading .cp-eyebrow{margin:0 0 var(--cf-space-3);max-width:none;font-size:var(--cf-text-xs);line-height:var(--cf-leading-xs);font-weight:var(--cf-weight-bold);letter-spacing:var(--cf-tracking-eyebrow);text-transform:uppercase;color:var(--cf-color-accent-strong)}
#app .client-projects .cp-heading :is(h1,h2){margin:var(--cf-space-2) 0;font-family:var(--cf-font-display);font-size:var(--cf-text-display);line-height:var(--cf-leading-display);font-weight:var(--cf-weight-medium);letter-spacing:var(--cf-tracking-display);color:var(--cf-color-ink);overflow-wrap:anywhere}
#app .client-projects .cp-heading :is(h1,h2):focus{outline:none}
#app .client-projects .cp-heading p:not(.cp-eyebrow){margin:var(--cf-space-3) 0 0;max-width:var(--cf-measure);font-size:var(--cf-text-lg);line-height:var(--cf-leading-lg);color:var(--cf-color-muted)}
#app .client-projects .cp-heading p.cp-badge{margin:var(--cf-space-2) 0 0;max-width:none;font-size:var(--cf-text-lg);color:var(--cf-color-ink);}
#app .client-projects .cp-heading .cp-badge{display:block;margin:var(--cf-space-2) 0 0;font-weight:var(--cf-weight-bold);letter-spacing:0;color:var(--cf-color-ink)}

#app .client-projects h2{margin:0 0 var(--cf-space-4);font-family:var(--cf-font-sans);font-size:var(--cf-text-2xl);line-height:var(--cf-leading-2xl);font-weight:var(--cf-weight-bold);letter-spacing:0;color:var(--cf-color-ink)}
#app .client-projects h3{margin:var(--cf-space-5) 0 var(--cf-space-3);font-family:var(--cf-font-sans);font-size:var(--cf-text-xl);line-height:var(--cf-leading-xl);font-weight:var(--cf-weight-bold);color:var(--cf-color-ink)}
#app .client-projects h4{margin:var(--cf-space-4) 0 var(--cf-space-2);font-size:var(--cf-text-md);font-weight:var(--cf-weight-bold)}

/* Buttons (.cf-btn): secondary by default; each form's submit and the brief confirmation are the one primary. */
#app .client-projects button{display:inline-flex;align-items:center;justify-content:center;min-height:var(--cf-control-height);max-width:100%;margin:0;padding:var(--cf-space-2) var(--cf-space-5);border:1px solid var(--cf-color-control);border-radius:var(--cf-radius-pill);background:var(--cf-color-surface);color:var(--cf-color-ink);font-family:var(--cf-font-sans);font-size:var(--cf-text-md);line-height:var(--cf-leading-sm);font-weight:var(--cf-weight-regular);text-align:center;white-space:normal;overflow-wrap:anywhere;cursor:pointer;opacity:1;box-shadow:none;transition:background-color var(--cf-duration-fast) var(--cf-ease-standard),border-color var(--cf-duration-fast) var(--cf-ease-standard)}
#app .client-projects button:hover:not(:disabled){background:var(--cf-color-raised);border-color:var(--cf-color-ink);color:var(--cf-color-ink)}
#app .client-projects :is(button[type=submit],[data-confirm]){display:flex;margin-top:var(--cf-space-5);background:var(--cf-color-accent);border-color:var(--cf-color-accent);color:var(--cf-color-on-accent)}
#app .client-projects :is(button[type=submit],[data-confirm]):hover:not(:disabled){background:var(--cf-color-accent-strong);border-color:var(--cf-color-accent-strong);color:var(--cf-color-on-accent)}
#app .client-projects button:disabled{background:var(--cf-color-sunken);border-color:var(--cf-color-line-strong);color:var(--cf-color-muted);cursor:not-allowed;opacity:1}
#app .client-projects :focus-visible{outline:var(--cf-focus-width) solid var(--cf-color-focus);outline-offset:var(--cf-focus-offset);box-shadow:none}
#app .client-projects .cp-actions{display:flex;flex-wrap:wrap;gap:var(--cf-space-2);margin:var(--cf-space-5) 0}
#app .client-projects .cp-actions a{display:inline-flex;align-items:center;min-height:var(--cf-control-height)}
#app .client-projects :is(a.cp-next,.cpi a.cp-next){display:inline-flex;align-items:center;min-height:var(--cf-control-height);padding:var(--cf-space-2) var(--cf-space-5);border:1px solid var(--cf-color-accent);border-radius:var(--cf-radius-pill);background:var(--cf-color-accent);color:var(--cf-color-on-accent);text-decoration:none}
#app .client-projects :is(a.cp-next,.cpi a.cp-next):hover{background:var(--cf-color-accent-strong);border-color:var(--cf-color-accent-strong)}
#app .client-projects .cp-project{display:flex;justify-content:flex-start;margin:var(--cf-space-2) 0;text-align:left}

/* Project steps: the section sub-navigation (.cf-tabs), one scrollable row at every width. */
#app .client-projects .cp-steps{display:flex;gap:var(--cf-space-1);margin:var(--cf-space-6) 0;padding:0;overflow-x:auto;border:0;border-bottom:0;border-radius:0;background:transparent;scrollbar-width:thin}
#app .client-projects .cp-steps button{flex:none;flex-direction:column;min-height:var(--cf-control-height);margin:0 0 -1px;padding:0 var(--cf-space-4);border:0;border-bottom:2px solid transparent;border-radius:var(--cf-radius-sm) var(--cf-radius-sm) 0 0;background:transparent;color:var(--cf-color-muted);white-space:nowrap;text-align:left;box-shadow:none}
#app .client-projects .cp-steps button:hover:not(:disabled){background:var(--cf-color-sunken);color:var(--cf-color-ink);border-color:transparent}
#app .client-projects .cp-steps button[aria-pressed=true]{background:transparent;color:var(--cf-color-ink);border-bottom-color:var(--cf-color-accent);font-weight:var(--cf-weight-bold)}
#app .client-projects .cp-steps button:disabled{background:transparent;color:var(--cf-color-muted)}
#app .client-projects .cp-steps button[data-label]::after{content:attr(data-label) / "";height:0;overflow:hidden;visibility:hidden;font-weight:var(--cf-weight-bold);pointer-events:none}
#app .client-projects .cp-steps button:focus-visible{outline-offset:calc(var(--cf-focus-width) * -1)}
#app .client-projects button[aria-pressed=true]:not(.cp-steps button){background:var(--cf-color-accent-soft);border-color:var(--cf-color-accent);color:var(--cf-color-ink);font-weight:var(--cf-weight-bold)}
#app .client-projects .cp-toolbar{display:flex;flex-wrap:wrap;gap:var(--cf-space-2);margin:0 0 var(--cf-space-5);padding:0 0 var(--cf-space-5);border-bottom:0}

/* Fields (.cf-field__label, .cf-input). Checkboxes keep ink as the accent: the E5 checkbox edge contrast is pinned. */
#app .client-projects label{display:block;margin:var(--cf-space-4) 0;font-size:var(--cf-text-sm);line-height:var(--cf-leading-sm);font-weight:var(--cf-weight-bold);color:var(--cf-color-ink)}
#app .client-projects :is(textarea,input:not([type=checkbox]):not([type=radio]),select){display:block;width:100%;min-width:0;min-height:var(--cf-control-height);margin:var(--cf-space-2) 0 0;padding:var(--cf-space-2) var(--cf-space-3);border:1px solid var(--cf-color-control);border-radius:var(--cf-radius-sm);background:var(--cf-color-raised);color:var(--cf-color-ink);font-family:var(--cf-font-sans);font-size:var(--cf-text-md);line-height:var(--cf-leading-md);font-weight:var(--cf-weight-regular)}
#app .client-projects :is(input,textarea,select):disabled{background:var(--cf-color-sunken);border-color:var(--cf-color-line-strong);color:var(--cf-color-muted);opacity:1}
#app .client-projects textarea{resize:vertical}
#app .client-projects .cp-inline{display:flex;flex-wrap:wrap;gap:var(--cf-space-3);align-items:flex-start;font-weight:var(--cf-weight-regular);max-width:100%}
body.shell-active #app .client-projects .cp-card:not(.cp-confirm) label.cp-inline{display:block;max-width:100%;white-space:normal;overflow-wrap:normal}
body.shell-active #app .client-projects .cp-card:not(.cp-confirm) label.cp-inline input{margin-right:var(--cf-space-2);vertical-align:middle}
#app .client-projects input[type=checkbox]{appearance:auto;flex:none;width:20px;height:20px;min-height:0;margin:2px 0 0;padding:0;accent-color:var(--cf-color-ink);scroll-margin:var(--cf-space-4)}
@media(max-width:760px){#app .client-projects input[type=checkbox]{scroll-margin-bottom:calc(var(--cf-space-16) + var(--cf-space-4))}}
#app .client-projects fieldset{min-width:0;margin:var(--cf-space-6) 0;padding:var(--cf-space-6);border:0;border-radius:var(--cf-radius-lg);background:var(--cf-color-surface)}
#app .client-projects legend{padding:0 var(--cf-space-2);font-size:var(--cf-text-md);font-weight:var(--cf-weight-bold);color:var(--cf-color-ink)}
#app .client-projects .cp-brief-group{margin:var(--cf-space-6) 0;padding-top:var(--cf-space-6);border-top:0}
#app .client-projects .cp-brief-group:first-of-type{margin-top:var(--cf-space-2);padding-top:0;border-top:0}
#app .client-projects .cp-brief-group h3{margin:0 0 var(--cf-space-4)}
#app .client-projects .cp-section-toggle{width:100%;justify-content:flex-start;text-align:left;font-weight:var(--cf-weight-bold);background:transparent;border-color:transparent;border-radius:var(--cf-radius-sm)}
body.shell-active #app .client-projects button.cp-section-toggle{overflow-wrap:normal;word-break:normal;padding:8px 8px;font-size:var(--cf-text-sm);line-height:1.3}
#app .client-projects .cp-section-toggle:hover:not(:disabled){background:var(--cf-color-sunken);border-color:transparent}
.client-projects .cp-section-toggle::before{content:"";display:inline-block;width:7px;height:7px;margin:0 10px 2px 2px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
.client-projects .cp-section-toggle[aria-expanded=true]::before{transform:rotate(45deg)}

/* Cards (.cf-card), notices (.cf-notice) and saved text. */
#app .client-projects .cp-card{margin:var(--cf-space-5) 0;padding:var(--cf-space-6);background:var(--cf-color-surface);border:0;border-radius:var(--cf-radius-lg);box-shadow:var(--cf-shadow-sm)}
#app .client-projects .cp-card .cp-card{background:var(--cf-color-raised);box-shadow:none;border-radius:var(--cf-radius-md)}
#app .client-projects .cp-project-list{padding:var(--cf-space-3) var(--cf-space-5);border:0;border-radius:var(--cf-radius-lg);background:var(--cf-color-surface)}
#app .client-projects details{margin:var(--cf-space-4) 0;padding-top:var(--cf-space-3);border-top:0}
#app .client-projects details.cp-card{border-top:0}
#app .client-projects summary{min-height:var(--cf-control-height);align-content:center;cursor:pointer;font-size:var(--cf-text-md);font-weight:var(--cf-weight-bold)}
#app .client-projects pre{white-space:pre-wrap;overflow-wrap:anywhere;margin:var(--cf-space-3) 0;padding:var(--cf-space-4);border:0;border-radius:var(--cf-radius-sm);background:var(--cf-color-raised);color:var(--cf-color-ink);font-family:var(--cf-font-sans);font-size:var(--cf-text-md);line-height:var(--cf-leading-md)}
#app .client-projects small{display:block;font-size:var(--cf-text-sm);color:var(--cf-color-muted);overflow-wrap:anywhere}
#app .client-projects dt{margin-top:var(--cf-space-3);font-weight:var(--cf-weight-bold)}
#app .client-projects dd{margin:var(--cf-space-1) 0 var(--cf-space-3);white-space:pre-wrap}
#app .client-projects [role=status]{min-height:0;margin:var(--cf-space-3) 0;font-size:var(--cf-text-md);color:var(--cf-color-ink)}
#app .client-projects [role=status]:empty{margin:0}
#app .client-projects [role=status]:not(:empty){padding:var(--cf-space-3) var(--cf-space-4);border:1px solid var(--cf-color-info-border);border-left-width:4px;border-radius:var(--cf-radius-md);background:var(--cf-color-info-bg)}
#app .client-projects [role=alertdialog]{margin:var(--cf-space-4) 0;padding:var(--cf-space-4) var(--cf-space-5);border:1px solid var(--cf-color-warning-border);border-left-width:4px;border-radius:var(--cf-radius-md);background:var(--cf-color-warning-bg);color:var(--cf-color-ink)}
#app .client-projects .cp-save-error{margin:var(--cf-space-3) 0;padding:var(--cf-space-3) var(--cf-space-4);border:1px solid var(--cf-color-danger-border);border-left-width:4px;border-radius:var(--cf-radius-md);background:var(--cf-color-danger-bg);color:var(--cf-color-ink)}

/* E5 B-1 DR-3: landing, summary, section, intake and proposal text is Archivo 16px. */
#app .client-projects :is(.cp-badge,.cp-landing-identity,.cp-landing-status,.cp-editor-mode,.cp-save-error,.cp-renewed,.cp-section-toggle),#app .client-projects :is(.cp-landing,.cp-summary,.cp-intakes,.cp-proposal) :is(p,dt,dd,li,a:not(.cp-next),span,label,h4){font-size:var(--cf-text-lg);font-family:var(--cf-font-sans)}
/* Buttons and button-like links share one size in every toolbar (.cf-btn: --cf-text-md). */
#app .client-projects :is(button:not(.cp-section-toggle),a.cp-next){font-size:var(--cf-text-md)}
#app .client-projects .cp-landing{margin:0 0 var(--cf-space-5)}
#app .client-projects .cp-intakes ul{padding-left:var(--cf-space-5)}
#app .client-projects .cp-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--cf-space-6)}
#app .client-projects .cp-wide{grid-column:1/-1}
#app .client-projects .cp-evidence-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cf-space-6)}
/* E5 B-1 follow-up: secondary project actions and listings sit after the saved brief. */
#app .client-projects .cp-secondary{margin-top:var(--cf-space-8)}

/* Milestone workbench: a card with a definition list. */
#app .client-projects .cp-milestone{margin:var(--cf-space-5) 0;padding:var(--cf-space-5) var(--cf-space-6);border:0;border-radius:var(--cf-radius-lg);background:var(--cf-color-surface);box-shadow:var(--cf-shadow-sm)}
#app .client-projects :is(.cp-milestone-kicker,.cp-lineage-kicker,.cpi-kicker){margin:0;font-size:var(--cf-text-xs);line-height:var(--cf-leading-xs);font-weight:var(--cf-weight-bold);letter-spacing:var(--cf-tracking-eyebrow);text-transform:uppercase;color:var(--cf-color-accent-strong)}
#app .client-projects .cp-milestone h3{margin:var(--cf-space-2) 0 var(--cf-space-1)}
#app .client-projects .cp-milestone-target{margin:0 0 var(--cf-space-4);color:var(--cf-color-muted)}
#app .client-projects .cp-milestone dl{display:grid;grid-template-columns:minmax(130px,.45fr) 1fr;gap:var(--cf-space-2) var(--cf-space-5);margin:0}
#app .client-projects .cp-milestone dt{margin:0}
#app .client-projects .cp-milestone dd{margin:0}
#app .client-projects .cp-milestone-readiness{margin:var(--cf-space-4) 0 var(--cf-space-1);font-weight:var(--cf-weight-bold)}
#app .client-projects .cp-milestone-limit{margin:0;color:var(--cf-color-muted);font-size:var(--cf-text-sm)}

/* Project origin (import and prospect lineage). */
#app .client-projects .cp-lineage{margin:var(--cf-space-6) 0}
#app .client-projects .cp-lineage-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--cf-space-3);flex-wrap:wrap}
#app .client-projects .cp-lineage-head h3{margin:var(--cf-space-1) 0 var(--cf-space-2)}
#app .client-projects :is(.cp-lineage-head>span,.cp-lineage-foot,.cpi-meta){color:var(--cf-color-muted);font-size:var(--cf-text-sm)}
#app .client-projects .cp-lineage-status{padding:var(--cf-space-2) var(--cf-space-3);border:1px solid var(--cf-color-neutral-border);border-left-width:4px;border-radius:var(--cf-radius-md);background:var(--cf-color-neutral-bg);font-weight:var(--cf-weight-bold)}
#app .client-projects .cp-lineage details{padding:var(--cf-space-3) 0;border-top:0}
#app .client-projects .cp-lineage details details{margin:var(--cf-space-4) 0 0}
#app .client-projects .cp-lineage-source{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cf-space-6)}
#app .client-projects .cp-lineage-source dt{margin-top:var(--cf-space-3)}
#app .client-projects .cp-lineage-source dd{white-space:pre-wrap}
#app .client-projects .cp-lineage-fields{margin:var(--cf-space-2) 0}
#app .client-projects .cp-lineage-field{padding:var(--cf-space-4) 0;border-bottom:0}
#app .client-projects .cp-lineage-field:last-child{border-bottom:0}
#app .client-projects .cp-lineage-field dt{margin:0 0 var(--cf-space-1)}
#app .client-projects .cp-lineage-field dd{margin:0}
#app .client-projects :is(.cp-lineage-origin,.cp-lineage-changed){display:block}
#app .client-projects .cp-lineage-changed{color:var(--cf-color-warning-text)}
#app .client-projects .cp-lineage-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cf-space-3)}
#app .client-projects .cp-lineage-compare p{white-space:pre-wrap;margin:var(--cf-space-2) 0 0;padding:var(--cf-space-3);border-radius:var(--cf-radius-sm);background:var(--cf-color-raised);min-width:0;overflow-wrap:anywhere}
#app .client-projects .cp-lineage dd{overflow-wrap:anywhere}
#app .client-projects .cp-lineage-version{margin:var(--cf-space-1) 0 var(--cf-space-2);font-weight:var(--cf-weight-bold);color:var(--cf-color-ink)}

/* Outreach prospect → private client job start (mountProspectIntake) and its Project lineage. */
#app .client-projects.cpi fieldset{margin:var(--cf-space-5) 0;padding:var(--cf-space-5);min-width:0}
#app .client-projects.cpi fieldset.cpi-brief{border:0;padding:0;background:transparent}
#app .client-projects.cpi legend h3{margin:0}
#app .client-projects .cpi-pre{white-space:pre-wrap;padding:var(--cf-space-3);border:0;border-radius:var(--cf-radius-sm);background:var(--cf-color-raised)}
#app .client-projects .cpi-flag{padding:var(--cf-space-2) var(--cf-space-3);border:1px solid var(--cf-color-warning-border);border-left-width:4px;border-radius:var(--cf-radius-md);background:var(--cf-color-warning-bg)}
#app .client-projects .cpi-limit{color:var(--cf-color-ink);font-weight:var(--cf-weight-bold)}
#app .client-projects .cpi-source ul{padding-left:var(--cf-space-5)}
#app .client-projects .cpi-source li{margin:var(--cf-space-2) 0}
#app .client-projects .cpi-drafts .cp-inline{margin:var(--cf-space-3) 0;min-height:var(--cf-control-height);align-items:center}
#app .client-projects .cpi-drafts input[type=radio]{width:20px;height:20px;flex:0 0 auto;accent-color:var(--cf-color-ink)}
#app .client-projects .cpi-draft{margin:0 0 var(--cf-space-3) var(--cf-space-8)}
#app .client-projects .cpi-stale{padding:var(--cf-space-2) var(--cf-space-3);border:1px solid var(--cf-color-warning-border);border-left-width:4px;border-radius:var(--cf-radius-md);background:var(--cf-color-warning-bg)}
#app .client-projects .cpi-current{padding:var(--cf-space-2) var(--cf-space-3);border:1px solid var(--cf-color-success-border);border-left-width:4px;border-radius:var(--cf-radius-md);background:var(--cf-color-success-bg)}
#app .client-projects.cpi .cp-actions button[type=submit]{margin-top:0}
@container domain (max-width:900px){
 #app .client-projects :is(.cp-fields,.cp-evidence-groups){grid-template-columns:1fr}
}
@media (max-width:760px){
 #app .client-projects .cp-heading{margin-bottom:var(--cf-space-6);padding-bottom:var(--cf-space-5)}
 #app .client-projects :is(fieldset,.cp-card,.cp-milestone){padding:var(--cf-space-4)}
 #app .client-projects .cp-actions button{flex:1 1 110px}
 #app .client-projects .cp-milestone dl{grid-template-columns:1fr;gap:var(--cf-space-1) 0}
 #app .client-projects .cp-milestone dd{margin-bottom:var(--cf-space-2)}
 #app .client-projects :is(.cp-lineage-source,.cp-lineage-compare){grid-template-columns:1fr}
 #app .client-projects .cpi-draft{margin-left:0}
 #app .client-projects.cpi fieldset{padding:var(--cf-space-3)}
}

/* ---- UI-18 client work pages (#/workspaces/:w/clients…): page header, one stage rail, typed tiles, exact saved results ---- */
.cw-page{padding-bottom:var(--cf-space-12)}
.cw-page .cw-head h1{font-family:var(--cf-font-display);font-size:var(--cf-text-display);line-height:var(--cf-leading-display);font-weight:var(--cf-weight-medium);letter-spacing:var(--cf-tracking-display);color:var(--cf-color-ink)}
.cw-page .cw-head h1:focus{outline:none}
.cw-page .cw-head h1:focus-visible{outline:var(--cf-focus-width) solid var(--cf-color-focus);outline-offset:var(--cf-focus-offset)}
.cw-page .cw-head .cf-eyebrow a{color:inherit;text-decoration:none}
.cw-page .cw-head .cf-eyebrow a:hover{text-decoration:underline;text-underline-offset:3px}
.cw-page .cw-head .cf-page-header__description{margin:var(--cf-space-4) 0 0;max-width:var(--cf-measure);font-size:var(--cf-text-lg);line-height:var(--cf-leading-lg)}
.cw-head-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cf-space-2) var(--cf-space-4);margin:var(--cf-space-4) 0 0;font-size:var(--cf-text-md)}
.cw-head-meta>a{display:inline-flex;align-items:center;min-height:var(--cf-control-height);color:var(--cf-color-accent-strong);text-decoration:none}
.cw-page .cw-head-meta>a{color:var(--cf-color-accent-strong)}
/* .cf-page a{color:inherit} (journey.css) would otherwise recolour link buttons. */
.cw-page a.cf-btn{color:var(--cf-color-ink)}
.cw-page a.cf-btn--primary,.cw-page a.cf-btn--primary:hover{color:var(--cf-color-on-accent)}
.cw-head-meta>a:hover{text-decoration:underline;text-underline-offset:3px}
/* Mode tag: the neutral status chip (.cf-chip); a sample is marked with a dashed edge as well as its words. */
.cw-mode{display:inline-flex;align-items:center;min-height:26px;padding:var(--cf-space-1) var(--cf-space-3);border:1px solid var(--cf-color-neutral-border);border-radius:var(--cf-radius-pill);background:var(--cf-color-neutral-bg);color:var(--cf-color-neutral-text);font-size:var(--cf-text-xs);line-height:var(--cf-leading-xs);font-weight:var(--cf-weight-bold);letter-spacing:0;text-transform:none;vertical-align:middle}
.cw-mode-sample{border-style:dashed}
.cw-section{margin:0 0 var(--cf-space-10)}
.cw-page .cw-section>h2,.cw-page .cw-section .cf-panel-head h2{margin:0 0 var(--cf-space-4);font-family:var(--cf-font-sans);font-size:var(--cf-text-2xl);line-height:var(--cf-leading-2xl);font-weight:var(--cf-weight-bold);letter-spacing:0}
.cw-page .cw-subhead{margin:var(--cf-space-6) 0 var(--cf-space-3);font-size:var(--cf-text-lg);line-height:var(--cf-leading-lg);font-weight:var(--cf-weight-bold)}
.cw-section-note{margin:var(--cf-space-3) 0 0;color:var(--cf-color-muted);font-size:var(--cf-text-sm);line-height:var(--cf-leading-sm)}
.cw-count{font-size:var(--cf-text-sm);color:var(--cf-color-muted)}
/* Notices (.cf-notice): information by default; failed is an error, unknown and bounded are warnings. Also used by the
   client website step (website-review.js). */
.cw-notice{margin:0 0 var(--cf-space-5);padding:var(--cf-space-3) var(--cf-space-5);max-width:var(--cf-content-narrow);border:1px solid var(--cf-color-info-border);border-left-width:4px;border-radius:var(--cf-radius-md);background:var(--cf-color-info-bg);color:var(--cf-color-ink);font-size:var(--cf-text-md);line-height:var(--cf-leading-md)}
.cw-notice.cw-tone-failed{border-color:var(--cf-color-danger-border);background:var(--cf-color-danger-bg)}
.cw-notice:is(.cw-tone-unknown,.cw-tone-bounded){border-color:var(--cf-color-warning-border);background:var(--cf-color-warning-bg)}
.cw-page .cw-notice a{color:var(--cf-color-accent-strong)}
.cw-unknown{margin:0;padding:var(--cf-space-3) var(--cf-space-5);max-width:var(--cf-content-narrow);border:1px solid var(--cf-color-warning-border);border-left-width:4px;border-radius:var(--cf-radius-md);background:var(--cf-color-warning-bg);color:var(--cf-color-ink);font-size:var(--cf-text-md);line-height:var(--cf-leading-md)}
.cw-page :is(.cw-notice,.cw-unknown,.cw-checked) .cf-btn--quiet{min-height:var(--cf-control-height-sm);vertical-align:baseline;text-decoration:underline;text-underline-offset:3px}
.cw-checked{margin:var(--cf-space-2) 0 0;font-size:var(--cf-text-sm);color:var(--cf-color-muted)}
.cw-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* Stage rail (.cf-rail) inside a surface card. State is always written, never colour alone. */
.cw-page .cw-rail{padding:var(--cf-space-6) var(--cf-space-5);border:0;border-radius:var(--cf-radius-lg);background:var(--cf-color-surface);box-shadow:var(--cf-shadow-sm)}
.cw-page .cw-rail .cf-rail__mark{z-index:1}
.cw-page .cw-rail .cf-rail__step--done .cf-rail__mark::after{content:"";width:5px;height:10px;margin-top:-2px;border:solid var(--cf-color-on-accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
.cw-page .cw-rail :is(.cw-s-skipped,.cw-s-optional,.cw-s-waiting) .cf-rail__mark{border-style:dashed;border-color:var(--cf-color-line-strong)}
.cw-page .cw-rail .cw-s-active .cf-rail__mark{border-color:var(--cf-color-info-border);background:var(--cf-color-info-bg)}
.cw-page .cw-rail .cw-s-active .cf-rail__state{color:var(--cf-color-info-text)}
.cw-page .cw-rail .cf-rail__state{font-weight:var(--cf-weight-bold);letter-spacing:var(--cf-tracking-eyebrow);text-transform:uppercase}
.cw-stage-summary{margin-top:var(--cf-space-1);font-size:var(--cf-text-sm);line-height:var(--cf-leading-sm);color:var(--cf-color-muted)}
.cw-page .cw-stage-link{display:inline-flex;align-items:center;min-height:var(--cf-control-height-sm);margin-top:var(--cf-space-1);font-size:var(--cf-text-sm);color:var(--cf-color-accent-strong);text-decoration:none}
.cw-page .cw-stage-link:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:1000px){
 .cw-page .cw-rail{grid-auto-flow:row;grid-auto-columns:auto;gap:0;padding:var(--cf-space-5) var(--cf-space-4)}
 .cw-page .cw-rail .cf-rail__step{flex-direction:row;gap:var(--cf-space-3);padding:0 0 var(--cf-space-4)}
 .cw-page .cw-rail .cf-rail__step:last-child{padding-bottom:0}
 .cw-page .cw-rail .cf-rail__step::before{top:32px;bottom:4px;left:13px;right:auto;width:2px;height:auto}
 .cw-page .cw-rail .cf-rail__mark{flex:none}
}

/* Owner items as tiles (.cf-tile). */
.cw-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:var(--cf-space-4)}
.cw-tile{display:flex;flex-direction:column;align-items:flex-start;gap:var(--cf-space-2);padding:var(--cf-space-5);border:0;border-radius:var(--cf-radius-lg);background:var(--cf-color-surface)}
.cw-tile.cw-tone-failed{border-color:var(--cf-color-danger-border);background:var(--cf-color-danger-bg)}
.cw-tile-kind{margin:0;font-size:var(--cf-text-xs);line-height:var(--cf-leading-xs);font-weight:var(--cf-weight-bold);letter-spacing:var(--cf-tracking-eyebrow);text-transform:uppercase;color:var(--cf-color-accent-strong)}
.cw-tile.cw-tone-active .cw-tile-kind{color:var(--cf-color-info-text)}
.cw-tile.cw-tone-failed .cw-tile-kind{color:var(--cf-color-danger-text)}
.cw-tile-detail{margin:0 0 var(--cf-space-2);font-size:var(--cf-text-md);line-height:var(--cf-leading-md);color:var(--cf-color-ink)}

/* Saved results with exact references (.cf-row). */
.cw-results{list-style:none;margin:var(--cf-space-3) 0 0;padding:0;border-top:0;max-width:var(--cf-content-max)}
.cw-results li{display:flex;justify-content:space-between;align-items:baseline;gap:var(--cf-space-2) var(--cf-space-5);padding:var(--cf-space-4) 0;border-bottom:0}
.cw-result-label{margin:0;font-size:var(--cf-text-lg);line-height:var(--cf-leading-lg);font-weight:var(--cf-weight-bold)}
.cw-page .cw-result-label a{color:var(--cf-color-ink);text-decoration:none}
.cw-page .cw-result-label a:hover{text-decoration:underline;text-underline-offset:3px}
.cw-result-note{margin:var(--cf-space-1) 0 0;font-size:var(--cf-text-sm);line-height:var(--cf-leading-sm);color:var(--cf-color-muted)}
.cw-ref{flex:0 0 auto;padding:var(--cf-space-1) var(--cf-space-2);border-radius:var(--cf-radius-sm);background:var(--cf-color-sunken);color:var(--cf-color-ink);font-family:var(--cf-font-mono);font-size:var(--cf-text-xs);overflow-wrap:anywhere}
@media (max-width:760px){.cw-results li{flex-direction:column}.cw-ref{flex:initial}}

/* Index: filters by what jobs need (a toggle group; pressed uses accent-soft) and job rows. */
.cw-kinds{display:flex;flex-wrap:wrap;gap:var(--cf-space-2)}
.cw-kind{display:inline-flex;align-items:center;gap:var(--cf-space-3);min-height:var(--cf-control-height);padding:var(--cf-space-2) var(--cf-space-4) var(--cf-space-2) var(--cf-space-2);border:1px solid var(--cf-color-control);border-radius:var(--cf-radius-pill);background:var(--cf-color-surface);color:var(--cf-color-ink);font-family:var(--cf-font-sans);font-size:var(--cf-text-md);line-height:var(--cf-leading-sm);font-weight:var(--cf-weight-regular);cursor:pointer}
.cw-kind:hover{border-color:var(--cf-color-ink);background:var(--cf-color-raised)}
.cw-kind[aria-pressed=true]{background:var(--cf-color-accent-soft);border-color:var(--cf-color-accent);color:var(--cf-color-ink);font-weight:var(--cf-weight-bold)}
.cw-kind-all{padding-left:var(--cf-space-4)}
.cw-kind-count{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 var(--cf-space-2);border-radius:var(--cf-radius-pill);background:var(--cf-color-neutral-bg);color:var(--cf-color-neutral-text);font-size:var(--cf-text-sm);font-weight:var(--cf-weight-bold)}
.cw-kind.cw-tone-failed .cw-kind-count{background:var(--cf-color-danger-bg);color:var(--cf-color-danger-text)}
.cw-kind.cw-tone-attention .cw-kind-count{background:var(--cf-color-warning-bg);color:var(--cf-color-warning-text)}
.cw-kind.cw-tone-active .cw-kind-count{background:var(--cf-color-info-bg);color:var(--cf-color-info-text)}
.cw-kind:focus-visible,.cw-page a:focus-visible,.cw-page button:focus-visible{outline:var(--cf-focus-width) solid var(--cf-color-focus);outline-offset:var(--cf-focus-offset)}
.cw-jobs{list-style:none;margin:0;padding:0;display:grid;gap:var(--cf-space-3)}
.cw-job{display:flex;justify-content:space-between;align-items:center;gap:var(--cf-space-4) var(--cf-space-6);padding:var(--cf-space-5) var(--cf-space-6);border:0;border-radius:var(--cf-radius-lg);background:var(--cf-color-surface)}
.cw-job-needs{border-left:4px solid var(--cf-color-accent)}
.cw-job-kind{margin:0 0 var(--cf-space-1);display:flex;flex-wrap:wrap;gap:var(--cf-space-2);align-items:center;font-size:var(--cf-text-xs);line-height:var(--cf-leading-xs);font-weight:var(--cf-weight-bold);letter-spacing:var(--cf-tracking-eyebrow);text-transform:uppercase;color:var(--cf-color-muted)}
.cw-page .cw-job h3{margin:0 0 var(--cf-space-1);font-size:var(--cf-text-xl);line-height:var(--cf-leading-xl);font-weight:var(--cf-weight-bold)}
.cw-job h3 a{text-decoration:none}
.cw-job h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.cw-job-state{margin:0;font-size:var(--cf-text-md);color:var(--cf-color-ink)}
.cw-job-state span{font-weight:var(--cf-weight-bold)}
.cw-job-owner{margin:var(--cf-space-1) 0 0;font-size:var(--cf-text-sm);color:var(--cf-color-muted)}
.cw-job-actions{display:flex;flex-direction:column;align-items:flex-end;gap:var(--cf-space-2);flex:0 0 auto;text-align:right}
.cw-page .cw-job-open{display:inline-flex;align-items:center;min-height:var(--cf-control-height-sm);font-size:var(--cf-text-sm);color:var(--cf-color-accent-strong);text-decoration:none}
.cw-page .cw-job-open:hover{text-decoration:underline;text-underline-offset:3px}
.cw-job-actions small{font-size:var(--cf-text-xs);color:var(--cf-color-muted)}
@media (max-width:1100px){.cw-job{flex-wrap:wrap;align-items:flex-start}.cw-job-main{min-width:0;flex:1 1 160px}.cw-page .cw-job h3,.cw-page .cw-job h3 a{max-width:100%;white-space:normal}}
@media (max-width:760px){.cw-job{flex-direction:column;align-items:stretch;padding:var(--cf-space-4)}.cw-job-actions{align-items:flex-start;text-align:left}}
/* Empty state (.cf-state). */
.cw-empty{max-width:var(--cf-content-narrow);padding:var(--cf-space-8) var(--cf-space-6);border:1px dashed var(--cf-color-line-strong);border-radius:var(--cf-radius-lg);background:var(--cf-color-surface)}
.cw-page .cw-empty h3{margin:0 0 var(--cf-space-2);font-size:var(--cf-text-xl);line-height:var(--cf-leading-xl);font-weight:var(--cf-weight-bold)}
.cw-empty p{margin:0;color:var(--cf-color-muted);line-height:var(--cf-leading-md)}
.cw-empty .cw-empty-actions{display:flex;flex-wrap:wrap;gap:var(--cf-space-3);margin-top:var(--cf-space-4)}
/* Phase 8: on phones the six step tabs share rows at a fixed basis, so a long label ("5. Proposal & context")
   wraps inside its tab instead of running 8px into the next one. */
@media(max-width:760px){#app .client-projects .cp-steps button{white-space:normal}}

/* Batch 10: scoped presentation; persisted state and route hooks stay unchanged. */

.cf-pages-business-projects.cf-pages-business-projects{box-sizing:border-box;width:100%;max-width:var(--cf-content-narrow);margin-inline:auto;padding:var(--cf-space-8) var(--cf-space-3);gap:0;align-items:stretch;justify-content:flex-start;text-align:left;color:var(--cf-color-ink);background:var(--cf-color-paper);font-family:var(--cf-font-sans);font-size:var(--cf-text-body);line-height:1.5;overflow-wrap:anywhere}
.cf-pages-business-projects [hidden][hidden]{display:none!important}
.cf-pages-business-projects :is(header,.cf-page-header){display:flex;flex-direction:column;align-items:flex-start;gap:var(--cf-space-3);margin:0 0 var(--cf-space-8);padding:0;border:0;box-shadow:none}
#app .client-projects.cf-pages-business-projects .cp-heading{gap:var(--cf-space-1);margin-bottom:var(--cf-space-2);padding-bottom:var(--cf-space-2)}
#app .client-projects.cf-pages-business-projects .cp-heading :is(.cp-eyebrow,.cp-badge,p){margin:0}
body.shell-active.shell-active #app .client-projects.cf-pages-business-projects .cp-heading :is(h1,h2){margin:0}
#app .client-projects.cf-pages-business-projects>.cp-summary{margin-block-start:var(--cf-space-2)}
.cf-pages-business-projects :is(.cf-page-header__actions,nav){flex-wrap:wrap;gap:var(--cf-space-2)}
.cf-pages-business-projects :is(h1,h2,h3,h4){color:var(--cf-color-ink);font-family:var(--cf-font-sans);font-weight:var(--cf-weight-bold);overflow-wrap:anywhere}
.cf-pages-business-projects h2{font-size:var(--cf-text-h2);line-height:1.2}
.cf-pages-business-projects h3{font-size:var(--cf-text-h3);line-height:1.3}
.cf-pages-business-projects>:is(section,form,details),.cf-pages-business-projects>div>section{margin-block-start:var(--cf-space-8)}
.cf-pages-business-projects :is(article,fieldset,aside,form,section,details){box-shadow:none;min-width:0}
.cf-pages-business-projects fieldset{border:0;padding:0;margin:0;background:var(--cf-color-paper)}
.cf-pages-business-projects label{display:block;margin-block:var(--cf-space-3);font-size:var(--cf-text-body);line-height:1.5}
.cf-pages-business-projects :is(input,select,textarea){max-width:100%;font-family:var(--cf-font-sans);font-size:var(--cf-text-body)}
.cf-pages-business-projects textarea.cf-input{min-height:var(--cf-control-height);max-height:calc(6em + var(--cf-space-2) + 2px);padding:var(--cf-space-1) var(--cf-space-2);line-height:1.5;resize:none;overflow-y:auto}
.cf-pages-business-projects .cf-btn{min-height:var(--cf-control-height);padding:var(--cf-space-1) var(--cf-space-3);font-size:var(--cf-text-body);border:1px solid var(--cf-color-ink);border-radius:var(--cf-radius-pill);box-shadow:none;opacity:1}
.cf-pages-business-projects .cf-btn:not(.cf-btn--primary){background:var(--cf-color-paper);color:var(--cf-color-ink)}
.cf-pages-business-projects .cf-btn--primary{background:var(--cf-color-ink);color:var(--cf-color-on-accent)}
.cf-pages-business-projects .cf-btn:disabled{background:var(--cf-color-sunken);color:var(--cf-color-muted);opacity:1}
.cf-pages-business-projects .cf-card{padding:var(--cf-space-3);margin-block:var(--cf-space-3);border:1px solid var(--cf-color-line);border-radius:var(--cf-radius-card);background:var(--cf-color-paper);box-shadow:none}
.cf-pages-business-projects :is(dl,dt,dd,pre){max-width:100%;overflow-wrap:anywhere;white-space:normal}
.cf-pages-business-projects pre{white-space:pre-wrap;font-family:var(--cf-font-sans);font-size:var(--cf-text-body)}
.cf-pages-business-projects :is(blockquote,[role=alert]){border-width:1px;box-shadow:none}
.cf-pages-business-projects :focus-visible{outline:var(--cf-focus-width) solid var(--cf-color-focus);outline-offset:var(--cf-focus-offset)}
@media(max-width:760px){.cf-pages-business-projects.cf-pages-business-projects{padding:var(--cf-space-4) var(--cf-space-2)}.cf-pages-business-projects :is(form,section,article,nav){max-width:100%;min-width:0}
 #app .client-projects.cf-pages-business-projects .cp-heading{gap:var(--cf-space-1);margin-bottom:var(--cf-space-1);padding-bottom:var(--cf-space-1)}
 #app .client-projects.cf-pages-business-projects .cp-heading :is(.cp-eyebrow,.cp-badge,p){margin:0}
 body.shell-active.shell-active #app .client-projects.cf-pages-business-projects .cp-heading :is(h1,h2){margin:0;font-size:var(--cf-text-display-phone);line-height:var(--cf-leading-display-phone)}
 #app .client-projects.cf-pages-business-projects>.cp-landing{margin-block-start:0}
 #app .client-projects.cf-pages-business-projects .cp-landing :is(.cp-landing-identity,.cp-landing-status){margin:var(--cf-space-1) 0}
 #app .client-projects.cf-pages-business-projects .cp-confirm{margin-top:var(--cf-space-2);padding:var(--cf-space-2)}
 #app .client-projects.cf-pages-business-projects .cp-confirm label{margin-block:var(--cf-space-1)}
 #app .client-projects.cf-pages-business-projects :is(button[type=submit],[data-confirm]){margin-top:var(--cf-space-2)}}
@media(prefers-reduced-motion:reduce){.cf-pages-business-projects *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.cf-pages-business-projects .cw-tiles{grid-template-columns:minmax(0,1fr)}

.cf-pages-business-projects .cf-page-header__text{flex:0 1 auto}
.cf-pages-business-projects *{box-sizing:border-box;min-width:0}
.cf-pages-business-projects a{color:var(--cf-color-ink)}
/* At a doubled phone size, a normal paragraph stays one line and widens the page even
   when it contains spaces. Buttons keep word boundaries. A long brief token may break. */
body.shell-active.shell-active.shell-active #app .client-projects :is(p,li,dd,span,small,summary,a){max-width:100%;overflow-wrap:anywhere;word-break:normal}