/* Concept: keep the conversation thread. Canonical geometry for both proof views. */
:root{--space-unit:8px;--nav-width:208px;--page-inset:32px;--gutter:24px;--panel-inset:24px;--content-max:1600px;--content-inset:max(var(--page-inset),calc((100vw - var(--nav-width) - var(--content-max))/2));--feedback-duration:140ms}
.app-shell{grid-template-columns:var(--nav-width) minmax(0,1fr)}
.page-header{padding:24px var(--content-inset)}
.inbox-toolbar{padding:24px var(--content-inset)}
.inbox-layout{margin:0 var(--content-inset) 32px;grid-template-columns:320px minmax(0,1fr) 248px;height:calc(100vh - 220px)}
.campaign-heading{margin:0;padding:32px var(--content-inset) 24px}
.campaign-grid{padding:0;margin:0 var(--content-inset) 32px;max-width:none;gap:var(--gutter);grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
.campaign-editor{grid-column:span 7}.campaign-preview{grid-column:span 5}
.rail-controls{padding:var(--panel-inset) var(--panel-inset) 0}
.conversation-item{padding:24px var(--panel-inset)}
.thread-header{padding:24px var(--panel-inset)}
.messages{padding:24px var(--panel-inset);gap:24px}
.composer{padding:16px var(--panel-inset) 24px}
.handover{padding:12px var(--panel-inset);border-left:3px solid #799857;padding-left:calc(var(--panel-inset) - 3px)}
.contact-context{padding:24px var(--panel-inset)}
.form-section,.reach-panel{padding:var(--panel-inset)}
.preview-title{margin:0 0 16px}.preview-company{padding:16px var(--panel-inset)}
.preview-message{margin:24px var(--panel-inset) 16px calc(var(--panel-inset) + 16px)}
.wordmark{padding:0 8px 32px;gap:10px;align-items:center;font-size:31px;font-weight:600;letter-spacing:-1.3px;line-height:1}
.brand-symbol{width:44px;height:44px;display:block;flex:none}
.timeline-event{display:flex;align-items:center;justify-content:center;gap:8px}
.timeline-event:before,.timeline-event:after{content:"";height:1px;width:24px;flex:none;background:#9bad89}
.btn,.sidebar nav a,.sidebar-reset,.team-toggle,.conversation-item{transition:background-color var(--feedback-duration) ease,color var(--feedback-duration) ease,border-color var(--feedback-duration) ease}
@media(min-width:1700px){.inbox-layout{grid-template-columns:336px minmax(0,1fr) 272px}}
@media(max-width:1350px) and (min-width:1180px){.inbox-layout{grid-template-columns:280px minmax(0,1fr) 224px}}
@media(max-width:1179px){:root{--nav-width:176px;--page-inset:24px}.wordmark{padding-inline:0;font-size:27px;gap:8px}.brand-symbol{width:36px;height:36px}.inbox-layout{grid-template-columns:280px minmax(0,1fr)}.campaign-grid{grid-template-columns:1fr}.campaign-editor,.campaign-preview{grid-column:auto}.campaign-preview{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter)}.preview-title{grid-column:1/-1;margin:0}.reach-panel{margin:0}.thread-header{padding:16px var(--panel-inset)}}
@media(max-width:899px){:root{--nav-width:0px;--page-inset:16px;--gutter:16px;--panel-inset:16px}.app-shell{display:block}.wordmark{padding:0;font-size:28px;gap:8px}.brand-symbol{width:36px;height:36px}.page-header{padding:24px var(--content-inset)}.inbox-toolbar{padding:24px var(--content-inset) 16px}.inbox-layout{display:block;height:auto;margin-bottom:24px}.campaign-heading{padding:24px var(--content-inset)}.campaign-grid{display:block}.campaign-preview{display:block;margin-top:24px}.preview-title{margin-bottom:16px}.reach-panel{margin-top:24px}.thread-header{padding:16px 12px;min-height:76px}.messages{padding:24px var(--panel-inset)}.composer{padding:16px var(--panel-inset)}.contact-context.visible{padding:24px var(--panel-inset)}.conversation-item{padding:24px var(--panel-inset)}.timeline-event:before,.timeline-event:after{width:12px}.workspace{min-width:0}.workspace strong{max-width:120px}}
@media(prefers-reduced-motion:reduce){:root{--feedback-duration:0ms}}

/* Review: the navigation and work area share one outer grid. */
:root{--shell-max:1920px;--content-inset:0px;--page-inset:24px;--nav-width:208px}
.app-shell{width:calc(100% - 2 * var(--page-inset));max-width:var(--shell-max);margin:0 auto;padding:24px 0;gap:var(--gutter);min-height:100vh;align-items:start}
.sidebar{top:24px;height:calc(100vh - 48px);border-radius:10px}
.page-header{padding:16px 0 24px;background:transparent;min-height:80px}
.page-header>div{display:flex;align-items:center;gap:16px}
.page-header h1{font-size:26px;max-width:none}
.inbox-layout{margin:24px 0 0;height:calc(100vh - 152px);min-height:620px}
.campaign-heading{padding:24px 0}.campaign-heading h2{font-size:22px}
.campaign-grid{margin:0;gap:var(--gutter)}
.composer textarea{background:#f2f5ed;border:1px solid #9aa88e;border-radius:8px;padding:12px 14px;min-height:96px;font-size:16px;line-height:1.5}
.composer textarea:focus{outline:2px solid var(--focus);outline-offset:2px;background:#fff}
.composer textarea:disabled{background:#edf0e8;color:#687065;border-color:#c3cbbd}
.form-section select{appearance:none;-webkit-appearance:none;padding-right:48px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f5d49' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:20px 20px;min-height:48px}
.form-section select:disabled{opacity:.6}
.breadcrumb,.eyebrow,.nav-label{display:none}
.count,.workspace small,.user small,.user strong,.channel,.channel small,.sidebar nav b,.filters span,.conversation-first time,.conversation-copy p,.conversation-tag,.rail-footer,.thread-heading small,.handover,.handover-label,.day-label,.message-author,.message-time,.timeline-event,.composer-tabs button,.composer-tabs .window-status,.composer-footer small,.context-label,.contact-summary p,.contact-context dt,.contact-context dd,.badge,.context-section h4,.context-section p,.field-meta,.field-help,.inline-info,.form-actions,.preview-company strong,.preview-company small,.preview-message>span,.reach-total span,.reach-facts>div,.reach-title .badge,.step{font-size:14px}
.context-label{letter-spacing:0;text-transform:none}
.composer-footer small{max-width:none}.composer-footer{flex-wrap:wrap}.composer-footer .btn{margin-left:auto}
.thread-header{flex-wrap:wrap}.handover{flex-wrap:wrap}.timeline-event{line-height:1.6}.conversation-first{flex-wrap:wrap}
.message-time,.message-author,.day-label,.field-help,.field-meta,.rail-footer,.context-section p,.contact-context dt{color:#5e6955}
@media(max-width:1179px){:root{--nav-width:176px}.campaign-preview{align-items:start}.workspace strong{max-width:128px}}
@media(max-width:899px){:root{--page-inset:16px;--content-inset:0px}.app-shell{padding:16px 0;display:block}.sidebar{top:0;height:auto;border-radius:10px;padding:16px}.wordmark{font-size:26px;gap:6px}.brand-symbol{width:32px;height:32px}.workspace{max-width:155px;padding:8px}.workspace strong{max-width:104px}.workspace .company-avatar{display:none}.sidebar nav{margin:0;flex-wrap:wrap}.sidebar-reset{margin:0}.page-header{padding:24px 0 16px;min-height:0;align-items:center;gap:12px}.page-header h1{font-size:24px}.page-header>div{gap:8px;flex-wrap:wrap}.team-toggle{font-size:14px}.inbox-layout{margin:16px 0 0;height:auto;min-height:540px}.campaign-heading{padding:24px 0}.campaign-preview{display:block}.thread-header{padding:16px}.contact-context.visible{top:96px}.composer-tabs{gap:12px}.composer-tabs .window-status{width:100%;margin:0}.composer-footer small{width:100%}.form-actions{align-items:flex-start;flex-wrap:wrap}.form-actions .btn{margin-left:auto}.reach-title{flex-wrap:wrap}}

.skip:not(:focus-visible){width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}.skip:focus-visible{top:12px;left:16px;width:auto;height:auto;padding:12px;clip-path:none}

/* Current review contract: edge-to-edge navigation; one inset scale throughout. */
:root{--nav-width:240px;--page-inset:24px;--panel-inset:24px;--gutter:24px;--canvas:#f0f2ed;--ink:#20291e;--muted:#4c5846;--line:#cbd3c4;--control-border:#7d8c73;--secondary-ink:#4c5846}
.app-shell{width:100%;max-width:none;margin:0;padding:0;gap:0;grid-template-columns:var(--nav-width) minmax(0,1fr)}
.sidebar{position:sticky;top:0;height:100vh;border-radius:0;padding:var(--panel-inset);gap:0}
main{padding:0 var(--page-inset) var(--page-inset)}
.page-header{height:88px;min-height:88px;padding:24px 0;border:0}
.inbox-layout{margin:0;height:calc(100vh - 112px);min-height:620px}
.campaign-heading{padding:0 0 24px}.campaign-grid{margin:0;gap:var(--gutter)}
.wordmark{padding:0 0 32px;gap:10px}.workspace{margin:0 0 32px;padding:12px;gap:8px}.workspace strong{max-width:130px}
.sidebar nav{margin:0;gap:8px}.sidebar nav a,.sidebar-reset{padding:12px;min-height:44px}.sidebar-reset{margin-top:auto}
.channel{padding:24px 0}.user{padding:24px 0 0}
.rail-controls{padding:var(--panel-inset) var(--panel-inset) 0}.conversation-item{padding:24px var(--panel-inset)}
.thread-header{padding:24px var(--panel-inset)}.messages{padding:24px var(--panel-inset);gap:24px}.composer{padding:24px var(--panel-inset)}
.contact-context,.form-section,.reach-panel{padding:var(--panel-inset)}
.filters{margin-top:24px;gap:24px}.filters button{padding-bottom:12px}.composer-tabs{margin-bottom:16px;gap:24px}.composer-footer{margin-top:16px;gap:16px}
.thread{background:#f5f7f1}.conversation-item.selected{background:#e6eedb}.message.out .message-bubble{background:#dce9cb;border-color:#b7c9a1}.message-bubble{border-color:#c6d0bd}
.message-author,.message-time,.day-label,.timeline-event,.field-help,.field-meta,.rail-footer,.context-section p,.contact-context dt,.contact-summary p,.thread-heading small,.conversation-copy p,.conversation-first time,.composer-footer small,.form-actions,.reach-total span,.reach-facts dt,.preview-company small,.preview-message>span,.context-label{color:var(--secondary-ink)}
.conversation-tag{color:#715017}.conversation-tag.mine{color:#36572a}.conversation-tag.done{color:var(--secondary-ink)}
.search,.form-section input,.form-section textarea,.form-section select,dialog input,.composer textarea{border:1px solid var(--control-border);background-color:#fff}
.composer textarea{background:#edf2e6}.search{padding:12px}.search input{font-size:14px}.search svg{color:var(--secondary-ink)}
input::placeholder,textarea::placeholder{color:#55624d;opacity:1}
.btn,.team-toggle{border-color:var(--control-border)}.btn.primary{border-color:var(--action)}
.handover{background:#e4edd9;color:#35442c}.handover-label{background:#cdddba;color:#304622}.badge{color:#445438;border-color:#b6c4a9}.badge.good{color:#355326;background:#e7f0dc;border-color:#a9bf92}
.inline-info{color:#415035;background:#e8eedf;border-color:#718c53}.legend.paid,.reach-bar{background:#b3c49d}.legend.free,.reach-bar span{background:#42602d}
.workspace{border-color:#718069}.workspace small,.user small,.channel small{color:#d1dbc8}
@media(max-width:1179px){:root{--nav-width:224px}.inbox-layout{grid-template-columns:280px minmax(0,1fr)}.wordmark{font-size:29px}.brand-symbol{width:40px;height:40px}.workspace .company-avatar{display:grid}.workspace strong{max-width:110px}.thread-header{padding:16px var(--panel-inset)}}
@media(max-width:899px){:root{--page-inset:16px;--panel-inset:16px;--gutter:16px}.app-shell{display:block}.sidebar{position:relative;height:auto;padding:16px;display:grid;gap:16px;border-radius:0}.wordmark{padding:0;font-size:26px;gap:8px}.brand-symbol{width:32px;height:32px}.workspace{margin:0;padding:8px;max-width:160px}.workspace .company-avatar{display:none}.workspace strong{max-width:130px}.sidebar nav{gap:8px}.sidebar nav a{border-radius:6px}.sidebar-reset{margin:0;padding:12px}.page-header{height:80px;min-height:80px;padding:16px 0}.inbox-layout{height:auto;min-height:540px;margin:0}.campaign-heading{padding:0 0 16px}.thread-header{padding:16px}.messages{padding:16px;gap:24px}.composer{padding:16px}.composer-tabs{gap:16px}.contact-context.visible{padding:16px}.conversation-item{padding:24px 16px}.form-section,.reach-panel{padding:16px}.filters{gap:24px}.campaign-preview{margin-top:24px}}

/* Review F21–F25: softer idle boundaries, readable text and focus retained. */
:root{--review-border:#bac5b2;--conversation-surface:#f8faf5;--reply-surface:#f5f8ef}
.message .message-bubble{border:0}
.search,#reply-text,#team-toggle,#resolve,.form-section input,.form-section textarea,.form-section select{border-color:var(--review-border)}
.thread{background:var(--conversation-surface)}
.composer textarea{background-color:var(--reply-surface)}
.composer textarea:focus{background-color:#fff}

/* Review F26–F29: quieter metadata, distinct contact labels. */
:root{--metadata-ink:#66715e}
.message-author,.message-time,.day-label,.timeline-event,.conversation-first time{color:var(--metadata-ink);opacity:.7}
.contact-context dt{font-weight:600;color:var(--ink);margin-bottom:6px}
.contact-context dd{font-weight:400;color:var(--secondary-ink)}
.campaign-heading{border-top:1px solid var(--line);padding-top:24px}

/* Usability review: responsibility and audience are task information. */
.message-author,.timeline-event{opacity:1;color:var(--metadata-ink)}
.composer-audience{font-size:14px;font-weight:600;margin-bottom:12px;color:var(--action)}
.composer-note{background:#fffcf4}
.composer-note .composer-audience{color:#70531e}
.composer-note textarea,.composer-note textarea:focus{background-color:var(--note)}
.composer-note .composer-tabs button.active{color:#70531e;border-color:#947033}
