/* One dark system for the public experience and product workspace.
   This loads last so component additions cannot fall back to light cards with
   light-mode typography. */
html[data-display=dark]{
  color-scheme:dark;
  --ctd-canvas:#071625;
  --ctd-surface:#0f263f;
  --ctd-surface-raised:#15324f;
  --ctd-surface-quiet:#10223a;
  --ctd-line:#365979;
  --ctd-text:#f1f6ff;
  --ctd-muted:#c3d3e8;
  --ctd-link:#94c2ff;
  --ctd-accent:#2f72dd;
  --ctd-accent-soft:#1b426e;
  background:var(--ctd-canvas);
}

html[data-display=dark] body,
html[data-display=dark] body.publicmode,
html[data-display=dark] body.fieldmode,
html[data-display=dark] body.publicmode #app,
html[data-display=dark] body.fieldmode #app,
html[data-display=dark] body.publicmode main,
html[data-display=dark] body.fieldmode main{
  background:var(--ctd-canvas)!important;
  color:var(--ctd-text)!important;
}

/* Header and brand: the first word in the CrewTend mark must never disappear
   against a dark navigation surface. */
html[data-display=dark] .salesnav,
html[data-display=dark] .fc-product-nav{
  background:var(--ctd-surface)!important;
  color:var(--ctd-text)!important;
  border-color:var(--ctd-line)!important;
}
html[data-display=dark] .salesnav :is(.salesbrand,.salesdesktop>a,.saleslogin,.fc-connect-link,.salesdropdown>summary),
html[data-display=dark] .fc-product-nav :is(a,summary){color:var(--ctd-text)!important;}
html[data-display=dark] .salesnav .brand52-lockup,
html[data-display=dark] .fc-product-nav .brand52-lockup{min-width:max-content;overflow:visible;}
html[data-display=dark] .salesnav .brand52-lockup>span,
html[data-display=dark] .fc-product-nav .brand52-lockup>span{color:var(--ctd-text)!important;}
html[data-display=dark] .salesnav .brand52-lockup b,
html[data-display=dark] .fc-product-nav .brand52-lockup b{color:#43a0ff!important;}
html[data-display=dark] :is(.salesmega,.fc-menu-panel,.fc-mobile-menu,.salesmobile nav){
  background:var(--ctd-surface-raised)!important;
  color:var(--ctd-text)!important;
  border-color:var(--ctd-line)!important;
  box-shadow:0 20px 40px #020b16aa!important;
}
html[data-display=dark] :is(.fc-menu-panel,.fc-mobile-menu,.salesmega) :is(h2,h3,h4,strong,b,label,summary){color:var(--ctd-text)!important;}
html[data-display=dark] :is(.fc-menu-panel,.fc-mobile-menu,.salesmega) :is(p,small,span){color:var(--ctd-muted)!important;}
html[data-display=dark] :is(.fc-menu-panel,.fc-mobile-menu,.salesmega) a{color:var(--ctd-link)!important;}

/* Shared public surfaces. These include the interactive previews, estimator,
   company stories, industry pages, catalog and comparison cards. */
html[data-display=dark] .publicmode :is(
  .journeydemo,.featurevisual,.demofloating,.ctaticket,
  .estimate53-invite,.estimate53-invite-card,
  .ct-home-ai,.showcase50,.showcase50 article,
  .trade-page49,.trade-experience49,.trade-demo49,.trade-windowbar,.trade-screen49,
  .trade-schedule49,.trade-options49,.trade-report49,.trade-flow49,.trade-faq49,
  .catalog52-hero,.catalog52-bottom,.catalog52-controls,.catalog52-card,.catalog52-availability,
  .media52-section,.media52-assets article,.media52-colors article,
  .ops52-hub>a,.ops52-hub>article,.ops52-metrics>div,.ops52-record,.ops52-empty,.ops52-detail,
  .fc-feature-card,.fc-inline-feature,.fc-fit-table,.fc-full-catalog,.fc-updates,
  .fc-solutions-grid>article,.fc-brand-mini,.fc-preview-chip,
  .comparison56-card,.native-compare-card,.comparison-verdict article,.compare-hero-facts49,
  .guidevisual,.security-stack,.trust-grid article
){
  background:var(--ctd-surface)!important;
  color:var(--ctd-text)!important;
  border-color:var(--ctd-line)!important;
  box-shadow:none;
}
html[data-display=dark] .publicmode :is(
  .journeydemo,.featurevisual,.demofloating,.ctaticket,
  .estimate53-invite,.estimate53-invite-card,.ct-home-ai,.showcase50,.trade-page49,
  .catalog52-hero,.catalog52-bottom,.catalog52-controls,.catalog52-card,.catalog52-availability,
  .media52-section,.media52-assets article,.media52-colors article,.ops52-hub,.ops52-metrics,
  .ops52-record,.ops52-empty,.ops52-detail,.fc-feature-card,.fc-inline-feature,.fc-fit-table,
  .fc-full-catalog,.fc-updates,.fc-solutions-grid,.fc-brand-mini,.fc-preview-chip,
  .comparison56-card,.native-compare-card,.comparison-verdict,.compare-hero-facts49,
  .guidevisual,.security-stack,.trust-grid
) :is(h1,h2,h3,h4,strong,b,label,summary,th,dt){color:var(--ctd-text)!important;}
html[data-display=dark] .publicmode :is(
  .journeydemo,.featurevisual,.demofloating,.ctaticket,
  .estimate53-invite,.estimate53-invite-card,.ct-home-ai,.showcase50,.trade-page49,
  .catalog52-hero,.catalog52-bottom,.catalog52-controls,.catalog52-card,.catalog52-availability,
  .media52-section,.media52-assets article,.media52-colors article,.ops52-hub,.ops52-metrics,
  .ops52-record,.ops52-empty,.ops52-detail,.fc-feature-card,.fc-inline-feature,.fc-fit-table,
  .fc-full-catalog,.fc-updates,.fc-solutions-grid,.fc-brand-mini,.fc-preview-chip,
  .comparison56-card,.native-compare-card,.comparison-verdict,.compare-hero-facts49,
  .guidevisual,.security-stack,.trust-grid
) :is(p,small,li,dd,.sub,.muted){color:var(--ctd-muted)!important;}
html[data-display=dark] .publicmode :is(
  .journeydemo,.featurevisual,.demofloating,.ctaticket,
  .estimate53-invite,.estimate53-invite-card,.ct-home-ai,.showcase50,.trade-page49,
  .catalog52-hero,.catalog52-bottom,.catalog52-controls,.catalog52-card,.catalog52-availability,
  .media52-section,.media52-assets article,.media52-colors article,.ops52-hub,.ops52-metrics,
  .ops52-record,.ops52-empty,.ops52-detail,.fc-feature-card,.fc-inline-feature,.fc-fit-table,
  .fc-full-catalog,.fc-updates,.fc-solutions-grid,.fc-brand-mini,.fc-preview-chip,
  .comparison56-card,.native-compare-card,.comparison-verdict,.compare-hero-facts49,
  .guidevisual,.security-stack,.trust-grid
) :is(a:not(.salesbutton),.saleseyebrow,.featurearrow,.salesalllink,.salestextbutton,.roleopen,.catalog52-open,.catalog52-back){color:var(--ctd-link)!important;}

html[data-display=dark] .publicmode :is(.salestruststrip,.texas56,.trade-experience49,.saleshuman,.salesindustries .industryexplorer,.salestoolwrap){
  background:var(--ctd-surface-quiet)!important;
  color:var(--ctd-text)!important;
  border-color:var(--ctd-line)!important;
}
html[data-display=dark] .publicmode :is(.salestruststrip,.texas56,.trade-experience49) :is(h1,h2,h3,h4,strong,b){color:var(--ctd-text)!important;}
html[data-display=dark] .publicmode :is(.salestruststrip,.texas56,.trade-experience49) :is(p,small,span,li){color:var(--ctd-muted)!important;}
html[data-display=dark] .publicmode .texas56 :is(.saleseyebrow,em,a){color:var(--ctd-link)!important;}

/* Fine-grained interactive controls retain clear boundaries rather than turning
   back into light form fields inside otherwise dark sections. */
html[data-display=dark] .publicmode :is(input,select,textarea,.salessearch,.footer53 input,.footer53 select){
  background:#0a1c31!important;
  color:var(--ctd-text)!important;
  border-color:var(--ctd-line)!important;
}
html[data-display=dark] .publicmode :is(input,textarea)::placeholder{color:#9db4cf!important;}
html[data-display=dark] .publicmode input[type=file]::file-selector-button{
  background:#244d7c;
  color:var(--ctd-text);
  border:1px solid #49739f;
  border-radius:6px;
  margin-right:10px;
  padding:8px 12px;
}
html[data-display=dark] .publicmode :is(.journeytabs button,.demoweek button,.recordtabs button,.demoreplychoices button,.demostages button,.catalog52-filters button,.ops52-nav a){
  background:var(--ctd-surface-raised)!important;
  color:var(--ctd-text)!important;
  border-color:var(--ctd-line)!important;
}
html[data-display=dark] .publicmode :is(.journeytabs button.selected,.demoweek button.selected,.recordtabs button.selected,.demostages button.selected,.catalog52-filters button[aria-pressed=true],.ops52-nav a[aria-current]){
  background:var(--ctd-accent)!important;
  color:#fff!important;
  border-color:var(--ctd-accent)!important;
}
html[data-display=dark] .publicmode :is(table,thead,tbody,tr,th,td){
  background-color:var(--ctd-surface)!important;
  color:var(--ctd-text)!important;
  border-color:var(--ctd-line)!important;
}
html[data-display=dark] .publicmode :is(td,th) :is(p,small,span,li){color:var(--ctd-muted)!important;}
html[data-display=dark] .publicmode :is(.industrytilecta,.industryrailfoot,.brief-eyebrow,.plan-fit,.saleseyebrow){color:var(--ctd-link)!important;}
html[data-display=dark] .publicmode .showcase50-logo{background:#f8fafc!important;}
html[data-display=dark] .publicmode :is(.demowindowbar,.agent-product-demo .demowindowbar){
  background:var(--ctd-surface-raised)!important;
  color:var(--ctd-muted)!important;
  border-color:var(--ctd-line)!important;
}
html[data-display=dark] .publicmode .demowindowdots{color:#9fb7d4!important;}
html[data-display=dark] .publicmode :is(.demoline>span,.demoline small,.estimate53-sectors,.estimate53-drop>span){color:var(--ctd-muted)!important;}
html[data-display=dark] .publicmode .estimate53-drop{
  background:var(--ctd-surface-raised)!important;
  color:var(--ctd-text)!important;
  border-color:#527aa6!important;
}
html[data-display=dark] .publicmode .estimate53-drop :is(strong,b){color:var(--ctd-text)!important;}
html[data-display=dark] .publicmode .ct-home-ai-image>div{
  background:var(--ctd-surface-raised)!important;
  color:var(--ctd-text)!important;
  border-color:var(--ctd-line)!important;
}
html[data-display=dark] .publicmode .ct-home-ai-image>div :is(small,p){color:var(--ctd-muted)!important;}
html[data-display=dark] .publicmode .salessection a:not(.salesbutton)>b,
html[data-display=dark] .publicmode .ctaticket :is(.ticketeyebrow,.ticketprice,.ticketprice>span,a){color:var(--ctd-link)!important;}
html[data-display=dark] .publicmode .salescta .saleseyebrow{color:#e1edff!important;}

/* The industry workflow is a nested mini-product. Its tabs, statuses and
   records use their own light palette, so keep every one of those layers on
   the same dark tokens as the surrounding page. */
html[data-display=dark] .publicmode .trade-demo49 :is(
  .trade-tabs49 button,.trade-schedule49 button,.trade-options49 button,
  .trade-estimate49
){
  background:var(--ctd-surface-raised)!important;
  color:var(--ctd-text)!important;
  border-color:var(--ctd-line)!important;
}
html[data-display=dark] .publicmode .trade-tabs49 button[aria-pressed=true]{
  background:var(--ctd-accent)!important;
  color:#fff!important;
  border-color:var(--ctd-accent)!important;
}
html[data-display=dark] .publicmode .trade-tabs49 button[aria-pressed=false]{color:var(--ctd-muted)!important;}
html[data-display=dark] .publicmode .trade-stage{
  background:var(--ctd-accent-soft)!important;
  color:var(--ctd-link)!important;
}
html[data-display=dark] .publicmode .trade-demo49 :is(
  .trade-screen-title h3,.trade-schedule49 :is(b,strong),.trade-fields49 dd,
  .trade-tasks49 label,.trade-permit,.trade-readings49 label,
  .trade-options49 strong,.trade-estimate49>div
){color:var(--ctd-text)!important;}
html[data-display=dark] .publicmode .trade-demo49 :is(
  .trade-screen-title small,.trade-schedule49 small,.trade-fields49 dt,
  .trade-hint,.trade-options49 span,.trade-estimate49 :is(p,small),
  .trade-report49 :is(p,small),.trade-screen-footer
){color:var(--ctd-muted)!important;}

/* These routes ship classless article cards or a dark section root in their
   light stylesheet. Scope the reset to the affected components so rich copy
   remains readable without flattening their layouts. */
html[data-display=dark] .publicmode :is(.compare-proof49 article,.resource-grid51>article){
  background:var(--ctd-surface)!important;
  color:var(--ctd-text)!important;
  border-color:var(--ctd-line)!important;
  box-shadow:none!important;
}
html[data-display=dark] .publicmode :is(.compare-proof49,.resource-grid51) article :is(h2,h3,h4,strong,b){color:var(--ctd-text)!important;}
html[data-display=dark] .publicmode :is(.compare-proof49,.resource-grid51) article :is(p,small,li,span){color:var(--ctd-muted)!important;}
html[data-display=dark] .publicmode :is(.catalog52,.catalog52-results,.catalog52-results>section){color:var(--ctd-text)!important;}
html[data-display=dark] .publicmode .catalog52-results h2{color:var(--ctd-text)!important;}
html[data-display=dark] .publicmode .catalog52-results>section>p{color:var(--ctd-muted)!important;}
html[data-display=dark] .publicmode .trade-hero49 figcaption{
  background:var(--ctd-surface-raised)!important;
  color:var(--ctd-text)!important;
  border-color:var(--ctd-line)!important;
  box-shadow:none!important;
}
html[data-display=dark] .publicmode .trade-hero49 figcaption span{color:var(--ctd-muted)!important;}

/* The public shell keeps the signed-in workspace mounted for its demos. Give
   those retained controls dark values as well so they cannot flash light when
   a route changes or the workspace opens from a public call-to-action. */
html[data-display=dark] .headersearch{
  background:var(--ctd-surface-raised)!important;
  color:var(--ctd-link)!important;
  border-color:var(--ctd-line)!important;
}
html[data-display=dark] a.active{color:#fff!important;}

/* Feature-specific demos that use native header/article elements do not carry
   reusable card classes. Keep their inner schedule and comparison steps dark. */
html[data-display=dark] .publicmode .schedule-example{
  background:var(--ctd-surface)!important;
  color:var(--ctd-text)!important;
  border-color:var(--ctd-line)!important;
}
html[data-display=dark] .publicmode :is(.schedule-example>header,.schedule-demo-week article){
  background:var(--ctd-surface-raised)!important;
  color:var(--ctd-text)!important;
  border-color:var(--ctd-line)!important;
}
html[data-display=dark] .publicmode :is(.schedule-example>header,.schedule-demo-week article) :is(span,strong){color:var(--ctd-text)!important;}
html[data-display=dark] .publicmode .schedule-demo-week article small{color:var(--ctd-muted)!important;}
html[data-display=dark] .publicmode .compare-scenario-grid article>span{color:var(--ctd-link)!important;}

/* Product workspace: apply the same tokens to newly added component families
   so a new route cannot inherit pale copy from a light-only card. */
html[data-display=dark] body:not(.publicmode) :is(aside,header,dialog,#mobile-bottom,.topbar,.modalbody,.fieldscreenhead,.servicetabs){
  background:var(--ctd-surface)!important;
  color:var(--ctd-text)!important;
  border-color:var(--ctd-line)!important;
}
html[data-display=dark] body:not(.publicmode) :is([class*="card"],[class*="panel"],[class*="modal"],[class*="record"],[class*="workspace"],[class*="table"],[class*="list"],[class*="drawer"],[class*="sheet"]){
  background-color:var(--ctd-surface)!important;
  color:var(--ctd-text)!important;
  border-color:var(--ctd-line)!important;
}
html[data-display=dark] body:not(.publicmode) :is([class*="card"],[class*="panel"],[class*="modal"],[class*="record"],[class*="workspace"],[class*="table"],[class*="list"],[class*="drawer"],[class*="sheet"]) :is(h1,h2,h3,h4,strong,b,label,summary,th,dt){color:var(--ctd-text)!important;}
html[data-display=dark] body:not(.publicmode) :is([class*="card"],[class*="panel"],[class*="modal"],[class*="record"],[class*="workspace"],[class*="table"],[class*="list"],[class*="drawer"],[class*="sheet"]) :is(p,small,li,dd,.sub,[class*="muted"]){color:var(--ctd-muted)!important;}
html[data-display=dark] body:not(.publicmode) :is(input,select,textarea){
  background:#0a1c31!important;
  color:var(--ctd-text)!important;
  border-color:var(--ctd-line)!important;
}

/* Restore the exact large footer cadence from version 36, using the current
   CrewTend name. The subtle wordmark intentionally exits the bottom edge. */
.footer53:has(.footerwordmark){overflow:hidden;padding-bottom:0;}
.footerwordmark{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  white-space:nowrap;
  font-size:clamp(70px,14vw,220px);
  font-weight:750;
  letter-spacing:-.07em;
  line-height:1.2;
  color:#204975;
  transform:translateY(15%);
  user-select:none;
}
.footerwordmark>span{font-size:.7em;color:#3a6cb0;letter-spacing:0;}
@media(max-width:520px){
  .footerwordmark{font-size:19vw;letter-spacing:-.06em;gap:10px;margin-top:12px;}
}
@media(max-width:360px){
  .footerwordmark{font-size:18vw;}
}