/* crm.css — the CRM page's own pieces (src/crm/shell.js): the header's mark + "CRM", the language switch and the
   door before the control center. Everything else comes from the garage app's styles (tokens, base, components,
   screens/account.css for the sign-in, screens/admin.css for the control center). Tokens only. Logical properties. */
.crm-brand{cursor:default}
.crm-brand__tag{color:var(--y)}
.crm-lang{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:40px;margin:4px 2px;padding:0 12px;border-radius:var(--r-pill);
  color:var(--text-2);box-shadow:inset 0 0 0 1px var(--line);font:600 var(--fs-xs)/1.2 var(--font);white-space:nowrap}
.crm-lang::after{content:"";position:absolute;inset:-4px -2px} /* 48px finger area */
.crm-lang:hover{color:var(--text);background:var(--s2)}
.crm-lang:focus-visible{outline:2px solid var(--y);outline-offset:2px}
/* the door (sign-in, no access, TOTP): one narrow column, like the garage's login */
.crm-door{gap:var(--sp-5)}
.crm-door__h{font-size:var(--fs-xl)}
.crm-door__tag{font-size:var(--fs)}
.crm-door__alt{display:flex;justify-content:center}
.crm-door__alt a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--sp-4);color:var(--text-2);
  text-decoration:underline;text-underline-offset:3px}
.crm-door__alt a:hover{color:var(--text)}
.crm-door .login__card > p{overflow-wrap:anywhere}
.crm__main{padding-top:var(--sp-5)}