/* TerminationHelp step 3 page (public/terminationhelp/start.html, body.ws4), DEC-0311: the chat and
   upload workspace in the homepage's v4 look (DEC-0309): the same palette, type, navy outlines,
   offset shadows and coral buttons, the bust guide with a line for each part of step 3, and a
   different worker beside each part. Loaded after the page's own <style>, so a rule here wins at
   the same specificity; the page's layout, phone chat mode (DEC-0276, DEC-0300) and every element
   workspace-app.js uses are unchanged. */

.ws4{
  --th-text:#111A2B;--th-brand:#0F2A4E;--th-sky:#5EC4E4;--th-sky-ink:#2A7FA3;--th-powder:#BFE3F0;
  --th-sage:#A9C7B4;--th-sand:#E2CFAE;--th-lav:#E8E9F2;--th-page:#F4F5F9;--th-coral:#F28C78;
  --th-muted:#4A5568;--th-body:#2D3748;
  --th-font:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  /* the page's own tokens, mapped onto v4 */
  --bg:var(--th-page);--surface:#fff;--surface-blue:var(--th-lav);--ink:var(--th-text);--muted:var(--th-muted);
  --blue:var(--th-brand);--blue-bright:var(--th-brand);--navy:var(--th-brand);--green:#2F7D5B;--border:#C9CCDA;
  --sans:var(--th-font);--shadow:5px 5px 0 var(--th-brand);--shadow-sm:3px 3px 0 var(--th-text);
  --ring:0 0 0 3px var(--th-sky);
  /* the shared workspace-app.js tokens (pack button, document chips, progress bar, cards) */
  --ui-accent:var(--th-brand);--ui-accent-2:var(--th-sky-ink);--ui-cta:var(--th-coral);
  --ui-soft:var(--th-lav);--ui-strong:var(--th-brand);--ui-soft-border:#C9CCDA;
  color-scheme:light;
}
body.ws4{font-family:var(--th-font);color:var(--th-text);background:var(--th-page)!important;}
body.ws4::before{display:none!important;} /* no construction-site photo */
.ws4 :is(a,button,summary,input,select,textarea):focus-visible{outline:3px solid var(--th-sky);outline-offset:2px;box-shadow:none;}

/* ---------- header: the homepage's ---------- */
.ws4 header{background:var(--th-page);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid #DADCE6;}
.ws4 header .bar{height:72px;}
.ws4 header .brand{gap:12px;color:var(--th-brand);}
.ws4 header .brand .mk{width:44px;height:44px;border-radius:10px;background:#E8EBF2;}
.ws4 .ws4-name{display:flex;flex-direction:column;line-height:1.15;}
.ws4 header .brand b{font-size:19px;font-weight:800;letter-spacing:-.01em;color:var(--th-brand);}
.ws4 header .brand b span{color:var(--th-brand);}
.ws4 .ws4-name small{font-size:12px;color:var(--th-muted);font-weight:500;}
.ws4 header .topnav{gap:22px;}
.ws4 header .topnav .link{color:var(--th-brand);font-size:14px;font-weight:600;min-height:44px;display:inline-flex;align-items:center;}
.ws4 header .topnav .link:hover{color:var(--th-brand);text-decoration:underline;text-underline-offset:4px;}
.ws4 .mnav > summary{width:44px;height:44px;border-radius:10px;border:2px solid var(--th-text);box-shadow:none;color:var(--th-brand);}
.ws4 .mnav-panel{border:2px solid var(--th-text);border-radius:12px;box-shadow:5px 5px 0 var(--th-brand);top:52px;}
.ws4 .mnav-panel .link{color:var(--th-brand);}
.ws4 .mnav-panel .link:hover{background:var(--th-lav);color:var(--th-brand);}

/* The "Practical help after dismissal" banner gives way to the step bar and the guide; it stays
   in the page for screen readers (as it already did on phones). */
.ws4 .hero-top{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---------- step 3 bar (workspace-app.js renderLandingStepBar) ---------- */
.ws4 .lv2-steps{max-width:none;margin:10px 0 4px;flex:0 0 auto;border-radius:12px;padding:8px 14px;box-shadow:4px 4px 0 var(--th-brand);font-family:var(--th-font);}
.ws4 .lv2-steps-k{font-size:14px;}
.ws4 .lv2-steps-ol{font-size:13px;}
.ws4 .lv2-steps-fig{display:none;}

/* ---------- three columns: guide + worker | chat | your pack ---------- */
.ws4 .ws4-side{display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-height:0;overflow:hidden;}
.ws4 .ws4-guide{display:flex;gap:10px;align-items:flex-end;}
.ws4 .ws4-guide-img{width:56px;height:56px;flex:none;transform-origin:50% 90%;}
.ws4 .ws4-bubble{position:relative;margin:0 0 12px;padding:11px 14px;background:#fff;border:2px solid var(--th-text);border-radius:14px;box-shadow:4px 4px 0 var(--th-brand);font-size:14px;line-height:1.45;color:var(--th-text);}
.ws4 .ws4-bubble::before{content:"";position:absolute;left:-10px;bottom:14px;width:16px;height:16px;background:#fff;border-left:2px solid var(--th-text);border-bottom:2px solid var(--th-text);transform:rotate(45deg);}
.ws4 .ws4-bubble b{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--th-sky-ink);margin-bottom:2px;}
.ws4 .ws4-fig{display:block;align-self:center;width:auto;height:min(380px,46vh);max-width:100%;object-fit:contain;object-position:bottom;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 80%,transparent);mask-image:linear-gradient(180deg,#000 80%,transparent);}
@media (prefers-reduced-motion:no-preference){
  .ws4 .ws4-guide-img{animation:ws4-nod 1.4s ease-out 1;}
  .ws4 .ws4-guide.is-nod .ws4-guide-img{animation:ws4-nod 1.1s ease-out 1;}
  .ws4 [data-role="ws-fig"]{animation:ws4-figin .45s ease-out both;}
}
@keyframes ws4-nod{0%,100%{transform:rotate(0)}30%{transform:rotate(-6deg)}60%{transform:rotate(3deg)}}
@keyframes ws4-figin{from{opacity:0;translate:0 10px;}to{opacity:1;translate:0 0;}}

/* ---------- the chat card (wide screens; phones keep the full-screen app look) ---------- */
@media (min-width:821px){
  .ws4 .stage{gap:24px;}
  .ws4 .chat{border:2px solid var(--th-text);border-radius:14px;box-shadow:5px 5px 0 var(--th-brand);}
  .ws4 .chat::before{display:none;}
  .ws4 .chat-head{background:var(--th-lav);border-bottom:2px solid var(--th-text);padding:12px 18px;}
  .ws4 .chat-head .t{font-weight:800;color:var(--th-brand);font-size:15px;}
  .ws4 .composer{border:2px solid var(--th-text);border-radius:14px;box-shadow:3px 3px 0 var(--th-text);margin:8px 16px 12px;}
}
.ws4 .chat-head .live{color:var(--green);font-weight:700;}
.ws4 .chat-body{background:#fff;}
.ws4 .msg .bub{background:var(--th-page);border:0;border-radius:4px 14px 14px 14px;color:var(--th-text);font-size:14.5px;line-height:1.5;box-shadow:none;}
.ws4 .msg.user .bub{background:var(--th-brand);color:#fff;border-radius:14px 4px 14px 14px;}
.ws4 .msg.notice .bub{background:#F6EEDF;border:1.5px solid var(--th-sand);color:#5A4416;}
.ws4 .chip,.ws4 .chip:link{color:var(--th-brand);background:#fff;border:2px solid var(--th-text);border-radius:999px;padding:8px 14px;font-size:13.5px;font-weight:700;min-height:40px;}
.ws4 .chip:hover{background:var(--th-powder);border-color:var(--th-text);}
.ws4 .composer .add{color:var(--th-brand);border:2px dashed #9CA3B8;border-radius:10px;min-height:40px;}
.ws4 .composer textarea{color:var(--th-text);font-family:var(--th-font);}
.ws4 .composer textarea::placeholder{color:#5B6475;}
.ws4 .composer .send{background:var(--th-coral);color:var(--th-text);border:2px solid var(--th-text);border-radius:10px;width:44px;height:44px;}
.ws4 .composer .libref{color:#4A5568;}
.ws4 .libref .dot{background:var(--green);}

/* buttons and cards the chat posts */
.ws4 .btn{border-radius:10px;font-family:var(--th-font);min-height:40px;}
.ws4 .btn-primary{background:var(--th-coral);color:var(--th-text);border:2px solid var(--th-text);box-shadow:3px 3px 0 var(--th-text);}
.ws4 .btn-secondary{background:#fff;color:var(--th-brand);border:2px solid var(--th-text);}
.ws4 .btn-accent{background:var(--th-brand);color:#fff;border:2px solid var(--th-text);}
.ws4 .preview-card,.ws4 .pay-card,.ws4 .bundle-card{border:2px solid var(--th-text)!important;border-radius:12px;background:#fff!important;}
.ws4 .pay-card h4,.ws4 .pay-card .price,.ws4 .bundle-card h4{color:var(--th-brand)!important;}
.ws4 .preview-card .pv-sec{border:1.5px solid #C9CCDA;}

/* ---------- your pack column ---------- */
.ws4 .packet{gap:12px;padding:0 6px 6px 0;}
.ws4 .packet .lbl{align-self:flex-start;background:var(--th-brand);color:#fff;border:0;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;}
.ws4 .packet .pk{background:#fff;border:2px solid var(--th-text);border-radius:12px;box-shadow:3px 3px 0 var(--th-brand);padding:12px 14px;font-size:13px;}
.ws4 .packet .pk .ph{font-size:14px;font-weight:800;color:var(--th-brand);}
.ws4 .packet .pk .ph .ic{background:var(--th-powder);color:var(--th-brand);border-radius:7px;}
.ws4 .packet .pk .tl .r{font-size:13px;color:var(--th-body);}
.ws4 .docchip{background:var(--th-page);border:1.5px solid #C9CCDA;color:var(--th-body);border-radius:8px;font-size:12.5px;}
/* "pending" pack documents are listed, not faded to illegibility (WCAG contrast) */
.ws4 .docchip.out.pending{opacity:1;color:#5B6475;border-style:dashed;}
.ws4 .docchip.out.ready{border-color:var(--th-brand);color:var(--th-brand);background:#EAF6FB;}
.ws4 .deadline{background:#F6EEDF;border:2px solid var(--th-text);border-radius:12px;color:var(--th-text);font-size:13px;}
.ws4 .deadline a{color:var(--th-brand);}
/* The one main button, in the homepage's coral (workspace-app.js sets its colours inline). */
.ws4 #packCtaBtn:not(:disabled){background:var(--th-coral)!important;color:var(--th-text)!important;border:2px solid var(--th-text)!important;box-shadow:3px 3px 0 var(--th-text)!important;font-size:15px!important;min-height:48px;}
.ws4 #packCtaBtn:disabled{background:var(--th-lav)!important;color:#4A5568!important;border:2px dashed #9CA3B8!important;}

/* ---------- footer ---------- */
.ws4 footer{background:var(--th-page);backdrop-filter:none;border-top:1px solid #DADCE6;}
.ws4 footer .foot .fineprint{color:var(--th-muted);font-size:12px;}
.ws4 footer .link{color:var(--th-brand);font-size:12.5px;}

/* ---------- widths ---------- */
@media (min-width:1101px){
  .ws4 .stage{grid-template-columns:minmax(210px,1fr) minmax(min(760px,46vw),2.3fr) minmax(280px,1fr);}
}
@media (max-width:1100px){
  /* one column: the chat; the step bar carries this part's worker */
  .ws4 .lv2-steps{position:relative;padding-right:64px;}
  .ws4 .lv2-steps-fig{display:block;position:absolute;right:10px;bottom:0;height:56px;width:auto;
    -webkit-mask-image:linear-gradient(180deg,#000 75%,transparent);mask-image:linear-gradient(180deg,#000 75%,transparent);}
}
@media (max-width:820px){
  .ws4 header .bar{height:56px;}
  .ws4 header .brand .mk{width:36px;height:36px;}
  .ws4 header .brand b{font-size:17px;}
  .ws4 .ws4-name small{display:none;}
  .ws4 .lv2-steps{margin:6px 10px 2px;padding:7px 58px 7px 10px;box-shadow:3px 3px 0 var(--th-brand);}
  .ws4 .lv2-steps-fig{height:48px;right:8px;}
  .ws4 .composer{border:2px solid var(--th-text);}
}

/* in-chat cards: the homepage's lavender panels, navy outlines and coral main button */
.ws4 .choice-card,.ws4 .privilege-card,.ws4 .doc-checklist,.ws4 .elig-card{background:var(--th-lav);border:2px solid var(--th-text);border-radius:12px;color:var(--th-text);}
.ws4 .choice-card .choice-q,.ws4 .privilege-card .choice-q,.ws4 .doc-checklist .dc-q,.ws4 .dc-row,.ws4 .elig-head{color:var(--th-brand);font-size:14px;}
.ws4 .choice-note{color:var(--th-muted);}
.ws4 .choice-btn{color:var(--th-brand);background:#fff;border:2px solid var(--th-text);font-weight:700;min-height:44px;}
.ws4 .choice-btn:hover{background:var(--th-powder);border-color:var(--th-text);}
.ws4 .choice-btn.primary,.ws4 .dc-continue{color:var(--th-text);background:var(--th-coral);border:2px solid var(--th-text);box-shadow:3px 3px 0 var(--th-text);}
.ws4 .choice-btn.primary:hover,.ws4 .dc-continue:hover{opacity:1;color:var(--th-text);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--th-text);}
.ws4 .elig-card.ok{background:#E6F0EA;}
.ws4 .elig-card.note{background:#F6EEDF;}
.ws4 .elig-card.note .elig-head{color:#5A4416;}
.ws4 .file-card{border:2px solid var(--th-text);border-radius:10px;}
.ws4 .file-card .ico{background:var(--th-powder);color:var(--th-brand);}

/* the guide column needs room for the bubble; below 1101px it gives way to the chat */
@media (min-width:1101px){.ws4 .stage{grid-template-columns:minmax(250px,1fr) minmax(min(740px,44vw),2.2fr) minmax(290px,1fr);}}
@media (max-width:1100px){.ws4 .stage > .ws4-side{display:none;}}

/* guide: the bust above its bubble, so the line has the column's full width */
.ws4 .ws4-guide{flex-direction:column;align-items:flex-start;gap:8px;}
.ws4 .ws4-guide-img{width:52px;height:52px;margin-left:6px;}
.ws4 .ws4-bubble{margin:0;font-size:14.5px;}
.ws4 .ws4-bubble::before{left:22px;top:-10px;bottom:auto;border-left:2px solid var(--th-text);border-top:2px solid var(--th-text);border-bottom:0;}
@media (max-width:820px){
  .ws4 .lv2-steps{width:auto;box-sizing:border-box;}
  .ws4 .lv2-steps-k{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;}
  .ws4 .lv2-steps-due{margin-left:0;white-space:nowrap;}
}
.ws4 .chat-head .live{color:#22603F;}
/* The bust is the header logo only (owner, 27 Oct 2026): the guide's line is a plain card. */
.ws4 .ws4-bubble::before{display:none;}