/* Ekreon Group: Concrete & Ultramarine | Shared platform layer R2 | staging only.
   App and authentication only. Do not recolour semantic status, ticket priority,
   workstream bars or third-party provider marks. */
:root{--ek-brand-ink:#232D3D;--ek-brand-ultramarine:#3445B5;--ek-brand-ultramarine-dark:#283993;--ek-brand-ochre:#E5B46A;--ek-brand-paper:#F2F3F5;--ek-brand-border:#D8DDE7;--ek-brand-white:#FEFEFF}
/* Keep dark-mode preference usable, with lighter actionable contrast. */
body.app-body:not(.theme-studio-dark){
 --bg:#F2F3F5;--surface:#FEFEFF;--surface-2:#F5F6F9;--surface-3:#E8ECF4;
 --text:#232D3D;--muted:#59657A;--line:#D8DDE7;--accent:#3445B5;--accent-2:#5262C7;
 --sidebar:#232D3D;--topbar:#FEFEFF;--shadow:0 8px 24px rgba(28,39,58,.045);
 --studio-focus:0 0 0 3px rgba(52,69,181,.17);background:#F2F3F5;color:#232D3D;
}
body.app-body.theme-studio-dark{--accent:#ACB8FF;--accent-2:#E5B46A;--studio-focus:0 0 0 3px rgba(172,184,255,.25)}
body.app-body:not(.theme-studio-dark) .app-sidebar{background:#232D3D!important;border-right:1px solid #394459!important;box-shadow:none!important;color:#F2F3F5}
body.app-body:not(.theme-studio-dark) .app-sidebar :is(.app-brand,.brand-wordmark,.app-brand strong,.ui-side-caption,.ek-ws-side-caption){color:#F4F6FA!important}
body.app-body:not(.theme-studio-dark) .app-sidebar :is(.app-nav-divider,.ek-ws-divider){background:#435064!important;border-color:#435064!important}
body.app-body:not(.theme-studio-dark) .app-sidebar :is(.app-nav-item,.ek-ws-nav-item){color:#D8DFEC!important;border-color:transparent!important}
body.app-body:not(.theme-studio-dark) .app-sidebar :is(.app-nav-item,.ek-ws-nav-item):hover{background:#354257!important;color:#FFFFFF!important}
body.app-body:not(.theme-studio-dark) .app-sidebar :is(.app-nav-item,.ek-ws-nav-item).active,
body.app-body:not(.theme-studio-dark) .app-sidebar :is(.app-nav-item,.ek-ws-nav-item)[aria-current=page]{background:#E7EAFB!important;color:#26368F!important;box-shadow:inset 3px 0 #3445B5!important}
body.app-body:not(.theme-studio-dark) .app-sidebar :is(.app-nav-item,.ek-ws-nav-item).active :is(svg,.app-nav-icon),
body.app-body:not(.theme-studio-dark) .app-sidebar :is(.app-nav-item,.ek-ws-nav-item)[aria-current=page] :is(svg,.app-nav-icon){color:#26368F!important}
body.app-body:not(.theme-studio-dark) .app-sidebar :is(.app-nav-item,.ek-ws-nav-item) :is(svg,.app-nav-icon){color:#C2CEDE}
body.app-body:not(.theme-studio-dark) .app-sidebar .brand-logo-mark{background:#FEFEFF;padding:3px;border-radius:9px;box-sizing:border-box}
body.app-body:not(.theme-studio-dark) .app-sidebar :is(.app-user-card,.app-sidebar-bottom){background:#293648!important;border-color:#435064!important;color:#EDF1FA!important}
body.app-body:not(.theme-studio-dark) .app-topbar{background:#FEFEFF!important;border-bottom-color:#D8DDE7!important}
body.app-body:not(.theme-studio-dark) .app-content{background:#F2F3F5}
body.app-body:not(.theme-studio-dark) :is(.button:not(.button-ghost):not(.button-secondary):not(.button-outline):not(.button-danger),button.button:not(.button-ghost):not(.button-secondary):not(.button-outline):not(.button-danger)){
 background:#3445B5;border-color:#3445B5;color:#FFFFFF;
}
body.app-body:not(.theme-studio-dark) :is(.button:not(.button-ghost):not(.button-secondary):not(.button-outline):not(.button-danger),button.button:not(.button-ghost):not(.button-secondary):not(.button-outline):not(.button-danger)):hover{background:#283993;border-color:#283993}
body.app-body :is(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline-color:var(--accent)!important;outline-offset:3px}
body.app-body:not(.theme-studio-dark) :is(input:not([type=checkbox]):not([type=radio]),select,textarea){accent-color:#3445B5}
body.app-body:not(.theme-studio-dark) :is(.ek-ws-glyph,.ek-dev-board-emblem){background:#3445B5;box-shadow:0 7px 20px rgba(52,69,181,.14)}
body.app-body:not(.theme-studio-dark) :is(.ek-ws-bar-track>span){background:#3445B5}
body.app-body:not(.theme-studio-dark) :is(.ek-dev-view-tabs a.active,.ek-dev-segmented>a.active){color:#3445B5}
body.app-body:not(.theme-studio-dark) :is(.co-invoice,.co-panel,.kb-shell .kb-reading){border-color:#D8DDE7}
body.app-body:not(.theme-studio-dark) .co-invoice-id strong{color:#3445B5}
body.app-body:not(.theme-studio-dark) .co-draft-banner{background:#F1F2FA;color:#303D87;border-color:#ABB5E5}
body.app-body:not(.theme-studio-dark) .co-invoice-total .co-grand{border-top-color:#232D3D}
body.app-body:not(.theme-studio-dark) :is(.kb-reading-head,.kb-editor-heading){background:#F4F5FA;border-color:#D8DDE7}
body.app-body:not(.theme-studio-dark) :is(.kb-reading-head .eyebrow,.kb-prose a,.kb-visual-input a,.kb-reading-footer a){color:#3445B5}
body.app-body:not(.theme-studio-dark) :is(.kb-prose .kb-callout,.kb-visual-input .kb-callout){background:#F0F2FB;border-color:#D0D6F0;border-left-color:#3445B5}
body.app-body:not(.theme-studio-dark) :is(.kb-prose blockquote,.kb-visual-input blockquote){border-left-color:#C5954E;background:#FBF7ED}
body.app-body:not(.theme-studio-dark) :is(.kb-prose th,.kb-visual-input th){background:#ECEFF7}
/* Never use dark-blue small print on a dark background. */
body.app-body :is(.app-sidebar,.auth-studio-intro) :is(.eyebrow,.ui-side-caption,.ek-ws-side-caption){color:#E5B46A!important}
body.app-body .app-sidebar a:focus-visible{outline-color:#E5B46A!important}
/* Client access screens, including sign in and password reset. */
body.auth-body{--accent:#3445B5;--accent-2:#5262C7;--bg:#F2F3F5;--surface:#FEFEFF;--text:#232D3D;--line:#D8DDE7;--muted:#59657A;background:#F2F3F5;color:#232D3D}
body.auth-body .auth-studio-intro{background:#232D3D!important;color:#F5F6FA!important}
body.auth-body .auth-studio-intro .brand-logo-mark{background:#FEFEFF;padding:3px;border-radius:9px;box-sizing:border-box}
body.auth-body .auth-studio-intro :is(.auth-studio-kicker,.auth-studio-intro-foot){color:#E5B46A!important}
body.auth-body .auth-studio-intro :is(h1,h2,h3,p){color:#F5F6FA!important}
body.auth-body :is(.button:not(.button-ghost),button.button:not(.button-ghost)){background:#3445B5;border-color:#3445B5;color:#FFFFFF}
body.auth-body :is(.button:not(.button-ghost),button.button:not(.button-ghost)):hover{background:#283993}
body.auth-body :is(a,input,button,select,textarea):focus-visible{outline:3px solid #3445B5;outline-offset:2px}
body.auth-body :is(.eyebrow,.text-link,.auth-switch a){color:#3445B5}
@media(prefers-reduced-motion:reduce){body.app-body .button,body.auth-body .button{transition:none!important}}


/* Alpha 9 | Consistent Ekreon identity: staff/client sidebar and login intro.
   Presentation-only. Scoped to existing brand markup; no auth/nav logic changes. */
body.app-body .app-sidebar .app-brand.brand-logo-composed {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 58px; padding: 4px 8px 18px;
  max-width: 100%; text-decoration: none;
}
body.app-body .app-sidebar .app-brand .brand-logo-mark {
  width: 45px; height: 45px; flex: 0 0 45px;
  padding: 4px; border-radius: 11px; box-sizing: border-box; object-fit: contain;
}
body.app-body .app-sidebar .app-brand .brand-wordmark {
  font-size: 18px; font-weight: 500; letter-spacing: -.035em;
  line-height: 1.1; gap: 4px; white-space: nowrap;
}
body.auth-body.auth-studio-login .auth-studio-intro-head .brand-logo-composed {
  display: inline-flex; align-items: center; gap: 15px;
  max-width: 100%; min-height: 60px; text-decoration: none;
}
body.auth-body.auth-studio-login .auth-studio-intro-head .brand-logo-composed .brand-logo-mark {
  width: 56px; height: 56px; flex: 0 0 56px; padding: 4px;
  border-radius: 12px; box-sizing: border-box; object-fit: contain;
}
body.auth-body.auth-studio-login .auth-studio-intro-head .brand-logo-composed .brand-wordmark {
  font-size: clamp(21px, 2.3vw, 27px); font-weight: 500;
  letter-spacing: -.04em; line-height: 1.05; gap: 5px;
  white-space: nowrap;
}
@media (max-width: 880px) {
  body.app-body .app-sidebar .app-brand .brand-logo-mark { width: 43px; height: 43px; flex-basis: 43px; }
  body.app-body .app-sidebar .app-brand .brand-wordmark { font-size: 17px; }
}
@media (max-width: 480px) {
  body.auth-body.auth-studio-login .auth-studio-intro-head .brand-logo-composed .brand-logo-mark {
    width: 46px; height: 46px; flex-basis: 46px;
  }
  body.auth-body.auth-studio-login .auth-studio-intro-head .brand-logo-composed .brand-wordmark { font-size: 21px; }
}

/* Alpha 10 — single approved two-line logo identity for every PHP view using
   brand_logo_html().  Context changes colour/scale only, not wording or typeface. */
body .brand-image-link .brand-wordmark {
  display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 0; width: auto; max-width: 100%; white-space: nowrap;
  font-family: Inter, Arial, system-ui, -apple-system, sans-serif;
  font-size: 23px; font-style: normal; font-weight: 800;
  letter-spacing: -.045em; line-height: .98; text-transform: none;
}
body .brand-image-link .brand-wordmark strong {
  display: block; font: inherit; font-weight: 800; letter-spacing: inherit;
  text-transform: lowercase; line-height: inherit;
}
body .brand-image-link .brand-wordmark small {
  display: block; font-family: inherit; font-size: 10px; font-weight: 700;
  letter-spacing: .24em; line-height: 1.1; text-transform: uppercase;
  margin-top: 4px; margin-left: 1px;
}
body.app-body .app-sidebar .app-brand .brand-wordmark {
  font-size: 21px; font-weight: 800; line-height: .98; letter-spacing: -.045em;
}
body.app-body .app-sidebar .app-brand .brand-wordmark small {
  color: #C6CEDE; font-size: 9px; margin-top: 4px;
}
body.auth-body.auth-studio-login .auth-studio-intro-head .brand-logo-composed .brand-wordmark {
  font-size: clamp(23px, 2.3vw, 27px); font-weight: 800;
  line-height: .98; letter-spacing: -.045em;
}
/* Dark intro requires explicit foreground; inherited white is overridden by legacy brand rules. */
body.auth-body .auth-studio-intro .brand-image-link .brand-wordmark,
body.auth-body .auth-studio-intro .brand-image-link .brand-wordmark strong {
  color: #F5F6FA !important;
}
body.auth-body.auth-studio-login .auth-studio-intro-head .brand-logo-composed .brand-wordmark small {
  color: #DBE2F0; font-size: 10px; margin-top: 4px;
}
body.auth-body .auth-studio-mobile-brand .brand-wordmark small,
body.auth-body .auth-shell .brand-wordmark small {color: #586579;}
@media(max-width: 880px) {
  body.app-body .app-sidebar .app-brand .brand-wordmark {font-size: 19px;}
}
@media(max-width: 480px) {
  body.auth-body.auth-studio-login .auth-studio-intro-head .brand-logo-composed .brand-wordmark {font-size: 23px;}
}